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はじめに 


月日の経つのは早いもので、 fHTML ハンドブック J を世に送り出してから、既 
に1年半力难過しました。その間にインターネットやそれを取り巻く世界も大きく 
変イ匕し、 W3C からは HTML 4.0 と HTML 文神にレイアウトやアクセシビリティ機 
能を付加する CSS1• 2か TE 式に勧告されました。 

ところが、現在 HTML 4.0 や CSS に実用的なレベルで対応している Web ブラウ 
ザはわずかしかありません0そのため、制作者はあれこれ制限を考えながら HTML 
4.0 を使用しなければなりません。また、 HTML 文書の表現力をアップさせるはず 
の CSS も、 Web ブラウザ側の不備により、かえってトラブルの種になっていること 
も事実です（誤解がないように断っておきますが、 HTML 4.0 や CSS に寅任はあり 
ません)。 

一方、実際に HTML 文書を作成してみればおわかり頂けると思いますが、一般 
的な内容の文杏であれば、 HTML 3.2 で困る場面はそれほど多くはありません。ま 
すこ 、近年普及か策しい各種携帯端末に搭載される Web ブラウザの多くは、現在も 
HTML 3.2 を基準に開発されています。であれば、今の段階では 「HTML 3.2」と 
いうのも、現実的な選択肢の1つだと思われます。その他もいろいろ議論がありま 
したが、最終的に今回の改訂版は、前版间様 HTML 3.2 を対象とすることになり 
ました0とはいうものの、多くの Web ブラウザが HTML 4.0 や CSS に対応するの 
も、それほど先の話ではないでしょう0ですから、時期が来たら必要に応じてスム 
ーズに移行できるように、 HTM しの存在意義や仕様に沿った文書の作成方法を身 
に付けておくことも大切です。そして、本裨がその一助となれば幸いです。 

なお、改訂作業に当たっては、前版の読者の方々から頂いたご意見やご指摘を 
参考に、筆者の誤解やあいまいだった表現を可能な限り改めましたが、まだまだ不 
充分な部分あるかもしれません。もしお気づきの点がありましたら、ご教示いただ 
けると助かります。 

最後になりましたが、本書の制作過程においてご援助を頂いた小沢正直 • 後藤 
昌代•嶋岡正二郎の各氏、作例見本に登場して頂いた 「water」 の皆さん、面倒 
な編集作業を引き受けてくださったソフトバンク株式会社の浦島弘行氏をはじめ編 
集部のみなさん、そして前版に対して貴重なご意見を寄せてくださった方々に厚く 
御礼申し上げます。 

1998年9月渡辺竜生 
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HTMU こついて 


WWW と HTML - 

インターネッ トを現在のように-•般社会に普及させた原動力は、やはり WWW 
(World Wide Web ) の存在でしょう。この WWW の仕組みは 、 CERN (欧州核物 
理学研究所、現 • 欧州共同利用素粒子物理学研究所）の Tim Bernes - Lee 氏によ 
って考え出されたもので、その主たる目的は「世界中にいる人々が簡単に情報を共 
有できる」ことにあります。 

WWW が登場するまでは、世界中のコンピュータがインターネットで接続されて 
いるにも関わらず、愔報交換に利用するためにはコンピュータごとに異なる操作方 
法を習得しなければなりませんでした。しかも、苦労してデータを入手してもそれ 
それが独自形式のため、そのまま読めないことが当たり前でした。しかし 、 WWW 
のおかげで、現在では世界中の WWW サーバに厥かれた悄報（リソース）に対して、 
ユーザの端末や目的の情報の牌かれた WWW サーバの機種、場所などは関係なく、 
簡単にアクセスすることができます。 

たとえば、 WWW による悄報へのアクセス方法の1つに「ハイパーリンク」があり 
ます0このシステムを利用すると、ユーザは画面に表示された「リンク情報」を選択 
するだけで、目的の情報へアクセスできます。そして、その元になる「ハイパーテキ 
スト」を記述するためのマークアップ言語が 「HTML (Hyper Text Markup Lan 
guage )」 で、 HTML によってマークアッブされたテキストファイルを 「 HTM し文禅」 
といいます。この HTML 文宵は単純なテキストデータですから、さまざまな端末で 
利用することができ、幅広く情報を共有するためには大変都合がいいのです。 

本•で扱う HTML - 

HTML の公式規格には、現在以下のようなものがあります0 


HTML 2.0 (1995 年11月策定） 

現在、ほとんどの Web ブラウザや HTML 文害を扱うアブリケーシヨンがサポート 
しており、この規格に沿って作成された HTML 文書の互換性はきわめて高いものが 
あります。したがって、 WWW での利用には一番適しています。ただ、規格として 
策定された時期が古いため、いくっかの機能不足な点があり、文書の内容によって 




HTMU こついて 


は使用しにくいこともあります。 


HTML 3.2 (1997 年1月策定） 

既に Web ブラウザメーカーによって開発.普及していた色やフォント、表に関わ 
る部分を容認した規格です。現在では HTML 2.0 に次いで多くの Web ブラウザや 
アプリケーションがサポートしており、文#の互換性の面でも安心して使用できる 
規格です0ただ、見栄えに関する要素は使い方を誤ると問題を引き起こすので注意 
が必要です。 

HTML 4.0 (1997 年12月策定） 

HTML 3.2 を大幅に拡張した規格で、フレームやスクリプトなど、既に Web ブ 
ラウザメーカーによって開発 • 普及していた技術を整理 • 統合して採用したり、別 
途スタイルシートを併用して、 HTML 文書に一般文#に近い表現力を持たせるこ 
とができるようになっています。半面、この規格を完全にサポートする Web ブラウ 
ザやアプリケーションは現在のところ存在しません。 

ところで、本薄が対象とする HTML の規格は敁新の4.0ではありません0この点 
については、企画時に,进論があったのですが、結局「従来通り HTML 3.2 のまま」 
となりました。もちろん、 HTML の理想や将来性を考えれ IfHTML 4.0 を対象とし 
た方か⑤ましいでしょう。しかし、現状では HTML 4.0 に「実用的なレベル」で対 
応している一般ユーザ向けの Web ブラウザは、 Windows 版 Internet Explorer 
4 .Ox くらいです。その他の Web ブラウザやアブリケーションは、メーカー独自の拡 
張機能を除けば、依然として対応は HTML 3.2 相当といわざるを得ません。それな 
らば、現時点では棟々の制限を気にしながら HTML 4.0 の文畲を作成するよりも、 
肢初から HTM し 3.2 に従って文喪を作成する方が現実的でしょう。もちろん、その 
一方で HTML 3.2 を使用しながら HTML の意義や基本機能を理解し、将来 HTML 
4.0 へ移行する際のギャップをできるだけ少なくしておくことも大切です0 

また 、 HTML 4.0 仕様密の冒頭では、 4.0 の使用を求めると同時に「過去の文# 
の互換性を維持するため 、 HTML 4.0 を解釈する ツール （ Web ブラウザなど）は、 
将来にわたって HTML 3.2 と 2.0 のサボート継続を求めます」とも書かれています。 
っまり、 HTML 2.0 と 3.2 は今後も廃止される予定はなく、作成された文書は将来 
にわたって有効です。その点はご安心ください0 

なお、 HTM しの各規格の歴史や位置づけにっいては、第3章もご寬ください0 



HTML 文書の要素と属性 


交•と嬰棄 - 

HTML 文畲の話に入る前に、まず一般的な文害の話をしましょう0短いもので 
すが、以下のサンブル文書を見てください0 


第1« QuickTime の登場 
M それは1991年に始まった 

今でこそパソコンで動两を再生することは、 fr : めて当たり前のことになったが、 
ちょっと前までは本当に*しいことだった。 


このサンブル文#には「第1$ QuickTime の登場」という章の見出し、「1-1 
それは1991年に始まった」という節の見出し、そして段落が1っあります。これら 
は、それぞれか l 窬の中で果たす役割を持った文#を構成する「要素」です（反対 
に、文裨とはこのような「要素」が集まることによってできあがっている、ともいえ 
る）。では、このサンブルをちょっとワープロで修飾してみましよう。 


第 1 章 QuickTime の ft* 

1-1 それは1991年に始まつた 

今でこそパソコンで 動 rt を再生することは、 掩 めて当たり前のことになつたが、 
ちょっと前までは本当に 難しい ことだった。 



煅初のサンブルよりは、こちらの方が見出しや本文などの要素が修飾（視覚的に 
区別）されているため、ずっと見やすいと思います0もし、これか刷するための 
文害なら、これでめでたしめでたしです。しかし「この文書データを世界中の人と 
共有しよう」、あるいは「将来使用するコンピュータか策わってもデータを利用した 
い」となると、話は別です0なぜなら、このようなワープロ独自の修飾を含む文書 
は、同じワープロソフトでしか再現できないからです0 
現在の技術レベルでは、情報を広く共有するためには「テキストデータ」を用いる 
のが最も確実です。ただ、テキストデータでは文字を修飾したりすることはできま 
せん。 
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•棄とタグ - 

そこで、コンピュータなどがテキストデータ内の各要素や構造を正しく認識でき 
るように、要素の種類を明示する「目印」が考案されました0この目印を「タグ（荷 
札)」といいます。 

では、先のサンプル文書に適当なタグを付けてみましょう（タグは仮に【】で表し 
ます)。 


【大見出し開始】第1章 QuickTime の*埸【大見出し終了】 

【中見出し開始】 1-1 それは1991年に始まった【中見出し終了】 

【段落開始】今でこそパソコンで動®を再生することは、極めて当たり前のことになったが、 
ちょっと前までは本当に難しいことだった。【段落終了】 


上図のように、テキストデータに適切なタグを付け、各要素を明示する作業を 
「マークアップ」といい、そのための言語（命令語）を「マークアップ言語」といいま 
す。そして、 HTML はマークアップ言語の一種なのです。もちろん、タグでマーク 
アッブするだけではなく、そのマークアッブされたテキストを解釈できるアプリケー 
シヨンが必、要です0そうなってはじめて、コンピュータか の要素や構造を自動 
的に処理できるようになります。 

先のサンブル文#を HTML でマークアップしてみましょう0 


■■■■■画 


< H 1> 第1章 QuickTime の登壜<^1> 

< H 2>1-1 それは1991年に始まった </ H 2> 

< P > 今でこそパソコンで動®を再生することは、極めて当たり前のことになったが、 
ちょっと前までは本当に難しいことだった。 < JP > 


何となく雰囲気はおわかりになったと思いますが、1行だけ抜き出してもう少し 
細かく見てみましょう。 



G 要素の内容〕 
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最初の<>で囲まれた部分は「開始タグ」と呼ばれ、要素の始まりを示し、最後の 
◊で囲まれた部分は「終了タグ」と呼ばれ、要素の終わりを示します。そして、開 
始タグと終了タグで囲まれた、つまりマークアップされた「第1章 QuickTime の 
登場」が、要素の「内容」です。これはテキストだけでなく、他の要素が内容となる 
こともあります0要素の内容に別の要素がなる場合、元の要素を「親要素」、内容 
となる要素を「子要素」といいます。 



第 1 章 [ 

—— j 親要素 h - 

^B?)QuickTime^ /B>) 

-► 

登場^ 



◄ -1- ► 

( 家 飞 



厂子要累 ] 


ただし、全ての要素を適当に「子要素」として使用することはできません0 HTML 
の規則では「この要素の内容にできる子要素は〇〇 J と決められています0その大 
まかな理屈については、 P .10 を参照してください。また、具体的にどの要素が内 
容になるのか、どの要素が親要素になるのかについては、2章を参照してください0 
なお、要素の棰類によっては終了タグが、あるいは開始タグ•終了タグ共に省略 
可能なものがあります0具体的にどの要素のどのタグが省略可能かについては、同 
じく 2章をご览ください。 


籲内容がない要素（空要素） 

HTM しの要素の中には内容がないものがあります。それらは「空要素」と呼ばれ 
ており、要素の「位取」を表す場合などに使用されます。たとえば、 HTML 文典は 
テキストデータですから、画像を中に含むことはできません。そこで、 HTM し文# 
内の画像が S かれるべき位置に代わりの空要素を厲きます0また、本物の内容との 
関係については、属性を使用して示します ( P .7 参照)。 

なお、空要素の終了タグはもともと存在しません0具体的にどの要素が空要素で 
あるのかについては、2章をご覧ください。 


•内容の形式（空白文字、改行の扱いなど） 

要素の内容は、他の要素、あるいは「一般的なテキスト」です。以後、本書の中 
で使用される「一般的なテキスト」とは、基本的に私たちが日常的に使用する「普通 
の文字」と思っていただいて結構です。ただし、 HTML 文書内では普通の文字が 
「特別な規則」に基づいて解釈されます。 

たとえば、空白文字の連続は1個の空白文字として解釈されます。また、タブや 
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改行 コード も空白文字として扱われます。したがって、 HTML 文書中では適当に 
改行や空白文字を使用して、メンテナンスしやすいように整形しても構いません0 
また、開始タグの直後や終了タグ直前の改行コードは無視されます0そのため、開 
始タグの直後や終了タグ直前で改行して、メンテナンスしやすいように整形するこ 
ともできます。 

ただし、以上の規則は「開始タグの直後や終了タグ直前の空白文字は、改行コー 
ドとして解釈され、無視される」ことをも意味します。 

<P>Sorry, Japanese Only • く / P> 

<P> Sorry, Japanese Only.</P> 


空白文字で単語の区切りを表現しない日本語では、あまり問題が表面化しませ 
んが、欧文をマークアップする場合（特に子要素）は注意が必要です。 

さらに、 HTML で特別な意味を持っ記号「く」「>」などをそのまま内容として記 
述すると、 Web ブラウザなどは単なる文字ではなく「これは HTML のタグだな」と 
解釈します（そうしないと、内容に他の要素を股くことができなくなる)。したがっ 
て、これらの特殊記号を表現したい場合は「文字参照」という方法を用います 
( P .310 参照)。 

•要素の属性 

さて、要素の内容にっいては大体おわかりいただけたと思いますので、今度は要 
素の「尿性」にっいてお話しします0诚性というのは、要素に付加的な情報を与え 
るための仕組みです。たとえば、域性によって「この要素は（可能ならば)画面の中 
央に表示しなさい」とか「この要素の元データは〇〇にある J 、 あるいは「この要素を 
表示できないときの代替テキストは〇〇 J などの情報を要素に付加することができ 
ます。 

属性は要素の開始タグの中、要素名の後ろに記述されます0 


2の 「< P>J と rsorryj の間 
の空白文字は改行コードとして 
扱われるため、1と2の表示 
澥釈）結果は同じになる。 
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前 ページの 例では、 「 ALIGN 」 が 属性名で「整列」を意味します。続く「=」は—方 
向に値を代入することを意味する記号です。そして最後に属性値 「 center 」 が 置か 
れます。属性は大文字と小文字の区別はありません。 

また、属性値には「"」(二重引用符）あるいは「•」(単引用符）記号で囲まれます。 
この記号は値がアルファベット （ A 〜 Z 、 a 〜 z )、 数字 （0 〜9)、ハイフン（-)、ピリ 
オド （.） の場合に限って省略することか可能です。ただし、いちいち省略可能条件 
を考えながら文害を作成して結局間違えるより、妓初から「全てつけるもの」と觉 
えた方がはるかに楽で、問違いも起きません。 

なお、厲性には省略か可能なものが多くあります。具体的にどの域性が省略可能 
かは、2章をご覧ください。 


•属性値の形式 

域性値記述には、多くは「一般的なテキスト」が用いられます。空白文字や改行、 
特殊記号の扱いなどは、要素の内容の「一般的なテキスト」とほぼ同じと考えてく 
ださい。 

ただし、やはり例外はあります。たとえば、 META 要素の 「 HTTP-EQUIVW 
性」 「 NAME 铖性」の値の先頭（名前開始文字）は「アルファベット」のみ、続く文 
字列（名前文字）は「アルファベット、数字、ハイフン、ピリオド」に限定されます0 

その他にも、 W 性によっては大文字と小文字か K 別されるものや数字のみが使用 
されるものもありますが、具体的な例は2章をご览ください。 

•論理型の属性 

域性の中には、ある機能の ON / OFF を設定する、いわゆる「論理型の域性」が 
あります0論理型の域性は、域性名と同じ名前の値が与えられると「真」、違う値 
を与えられると「偽」と判断されます。 

たとえば、 INPUT 要素には 「 CHECKED 」 という論理型の属性か•あります。こ 
の属性を有効にするためには 「 CHECKED =” checked "」 と記述するのが正規の書 
式 （full form ) です。しかし、現状では正規の書式を理解できない Web ブラウザが 
多く存在するため、一般的には 「 K 性値のみ」の省略#式 (minimized form ) で記 
述してください。また、論理型の属性を省略すると、 Web ブラウザなどアブリケー 
ション 側で適当な値が与えられます。そのため「偽」と判断され、属性が無効とな 
ります。 

なお、具体的にどの属性が論理型になるのかは、2章をご覧ください。 



HTML 文書構造の概略 


模式図と典 M 的な HTML 交耋 

HTML 文畨は、大きく分けて以下のような部分から憐成されています。 


PUBLIC --//W3C//DTD HTML 3.2//EN"> ) 



〔ヘッダ悄報 J 


く TITLE> 養老令概説（目次） </TITLE> 
( 中略） 


〔 HTML 文鏖 I , 


-(</HEAD>) 
.(く BODY>) 


^文書の本文 


<H1> 養老令概説一目次一 </Hl> 
( 中略） 


• ( く / BODY >) 


H 文害の本体1 


まず、文禅の骹初に記述されるのが「文押型宣言」と呼ばれるもので、この文神 
全体が従う文典型定義 (DTD : Document Type Definition P .305 参照）の槐 
類を宣言します。 「 DOCTYPEJ は文#型宣言、 「 HTMLJ は文#型定義の名前、 
「 PUBLIC 」 は公開された規格であることを示します。続く 「"-// W 3 C//DTD 
HTML 3.2// EN "」 が 「 W 3 C という組織によって策定された文書型定義 HTML 3.2 
の規格」を示します0文#型宣言とは、この HTML 文齊がどの規格に基づいて作成 
されたかを明示する、非常に重要な情報ですから、省略することはできません。も 
ちろん宣言を行った以上、文畨の内容はその規格に合致していなければなりません0 

文書型宣言以降が HTML 文書本体、っまり 「 HTML 要素」になります。また、 
HTML 要素は 「 HEAD 要素」と 「 BODY 要素」の2つで構成されています。 

HEAD 要素はヘッダ情報、つまりタイトルや基準となる URL 、 文字の符号化方 
式など文畲全体に関わる基本情報です。また、内容は基本的に Web ブラウザなど 
のウインドウには表示されません。 

BODY 要素は文害本文に相当するもので、通常、 Web ブラウザなどのウインド 
ウに表示されるのはこの部分です0 
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ブ Cl ックレべとテキストレべ JHW - 

HTML 文書の本体である BODY 要素の内容は、機能面から大きく 2つのグルー 
ブに分けられます。 

1つは文書本体の意味上の大きな固まりを表す「ブロックレベル要素」で、段落 
やリスト、引用文、水平線などの要素か孩当します。家にたとえると台所や居間、 
寝室、子供部屋などの区画、あるいはタンスや本棚などの家具に相当します0 

もう1つは、文書の具体的なデータにあたる「テキストレベル要素」で、テキスト 
や_像、生のデータあるいはそれらを修飾する要素か篇当します。これも家にたと 
えると本や壁の絵、食器、テレビ、洋服、アクセサリあるいは人間などに相当しま 
す。 

基本的にブロックレペル要素の中には、ブロックレベル要素とテキストレベル要 
素を入れることができます。部屋の中には家具や本、おもちゃなどが置けるのと同 
じです0ただし、同じブロックレベル要素に屈するものでも、種類によってはテキ 
ストレベル要素しか入れられないものもあります。これは本棚の中に部屋が入らな 
いのと同じようなことと考えてください。一方、テキストレベル要素の中にはテキ 
ストレベル要素だけを入れることができます。こちらは本にしおりを挟んだり禅き 
込みをすることはできても、本棚を入れることはできないのと同じようなことと考 
えてください0 

ただ、実際のところどの要素がブロックレベル、あるいはテキストレペルなのか、 
そして実際に内容として入れられる要素はどれなのか、いちいち覚えておくのは大 
変かもしれません0そのため、2章では、その要素がブロックレベルとテキストレべ 
ルのいずれに城しているのかを記述しておきました0また、具体的に内容として骰 
くことか< できる要素も全てあげておきました。 

なお、 HTML 3.2 では BODY 要素の中に直接テキストレベル要素を置いても問題 
ありませんが 、 HTML 4.0 ではブロックレベル要素で構造を組み立てた上で、その 
中にテキストレベル要素 （HTML 4.0 では「インライン要素」といいます）を置くよ 
うに決められています0いわれてみれば、部屋の区画ができあがっていない状態の 
家にいきなり住む人はあまりいませんから、規則としては、その方が自然でしよう。 
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ブロックレベル要索とテキストレベル要索の関係例 
(実際には内容がない要索もある） 




















HTML 文書作成上の注意点 


•も靈•なのは橘■を C 逋すること- 

前述のように、 HTML 文齊は広く悄報を共有するため、あるいは効率よく再利 
用するためのものです。したがって、 HTML 文書を作成する場合は「見栄え」では 
なく「構造」を記述することを第一番に考えなければなりません。そうはいっても、 
ピンとこない方も多いかもしれませんが、文宵の構造さえはっきりしていれば、た 
つた1つの文書をさまざまな形で利用できるようになるのです。 

たとえば、 Netscape Navigator のような画面表示用のブラウザは、「見出し」や 
「段落」「引用文」などといった要素に合わせて、文字を大きくしたり、揃え位置を 
変えたりして目立たせ、人問にわかりやすく表示することができます。一方、同じ 
文#を音声出力用のアブリケーシヨンは、要素に合わせて音を大きくしたり、間を 
開けたり、適切な説明を挿入して表現することができます。要は中身がしっかりし 
ていればその文许の利用方法は無限である、またさまざまな83境で同じ情報か"得ら 
れる、ということです。 

反対に「見栄え」を中心に HTML 文邦を作成すると、えてして要素の棟類とその 
内容が一致しない妙な HTML 文杏ができあがってしまいます。そのような文咨は、 
テキストブラウザや音声出カアブリケーシヨンを使用した場合には、正しく情報が 
得られなくなってしまいます0また、 HTML 文稗のメンテナンス性も悪くなるので、 
自分にとってもいいことはありません。 

確かに、 HTML 3.2 には見栄えの制御のための要素や域性が用意されています0 
ただし、これは「行きがかり上」規格に取り入れられた面もあり、その全ての使用を 
褚極的にすすめることはできません。その使用は、 HTML 文書の本質を崩さない程 
度にとどめてください。 

アクセシビリテイ- 

前項の内容とも関連しますが、公開する HTML 文書の利用者を限定するつもり 
なのか、それとも幅広く利用してもらうのか、よく考えましょう。公共性の高い官 
庁や団体ならともかく、個人や私企業がネ〗用者を限定することは、-•概に「問題が 
ある」とはいえません。ただし、現在の「インターネット」とは、一般社会に例えれ 
ば「公道」に相当するものです。そのような世界に「公開」される文書で、利用者を 



HTML 文書作成上の注意 


限定するのは、やはりいかがなものかと思います。 

もちろん、 HTML の規則に完全に従って文書を作成したからといって、全ての人 
が同じ条件で利用できるわけではありませんが、手始めに以下のような点に気をつ 
けてみてください。 


•代替テキストのための属性を積極的に利用する 

画像 や Java Applet 、 クライアントサイド•イメージ マップ 関連の要索には、そ 
れらを利用できない Web ブラウザのために、代替テキストを記述する 「ALT (AL 
Temate ) 城性」が用意されています。また、画像の場合は直接 Web ブラウザで表 
示できなくとも、受信して別のアブリケーシヨンで表示できることもあるので、ハ 
ィパーテキストリンクなどの入手手段も用意しましょう0 

籲適切なリンクを設定する 

リンクを設定する際、「ここ」や「こちら」などといったわかりにくい表現は避け、 
リンク先の内容が具体的に想像できるものにしましょう0たとえば、音声出カアブ 
リケーシヨンには、リンクか u 定されたテキストを抽出して、扱いやすくしてくれ 
るものがあります0しかし抽出したテキストが「ここ」「ここ」「ここ」…では、ユー 
ザは選択不能になってしまいます。 


參テキストだけで利用できる方法を用意する 

たとえば、両像をリンクのボタンとして使用する機会は多いと思います0その場 
合は、別途テキストを利用したリンクを用意しましょう0 

•横スクロールを避ける 

多くの Web ブラウザでは、ウインドウの横幅を超える大きさの文書を見るために 
は、横スクロールが必要となります0これは画面の小さいモニタや端末などを使用 
している場合、見通しかず j かず大変苦痛を感じます。画像などを使用する場合は注 
意してください。 
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Web ブラウザ 


本書では、現在使用されている Web ブラウザのうち、広く一般に普及している 
Netscape 社の 「Netscape Navigator 4. Ox 」 と Microsoft 社の 「Internet Ex 
plorer 4.0 xJ を中心に HTML 文将の解釈 • 表示に関して確認作業を行っています。 
本書のリファレンス中で特に断りなく 「 Web ブラウザ」と表記されている場合は、 
主にこの2種を指しています。ただし、細かい表示の差に関しては追求していませ 
ん〇なぜなら、「情報の共有」を主目的とした HTML では、具体的な表示方法のほ 
とんどは利用する個々のアブリケーシヨンの裁 M に任されているからです。 

また、本#ではこの穐の軎緒ではあまり触れられることのない、 Lynx などテキ 
ストブラウザでの確認事例も極力載せるように努めました0さらに、わずかではあ 
りますが、音声出力を持つテキストブラウザである日本 IBM 社の「ホームページ. 
リーダー」での使用結果も内容に反映させました。決して十分とはいえませんが、 
HTML 文押の幅広い利用形態の一部を知っていただければ幸いです。 

•本塞で確認作業に使用した Web ブラウザ 

Netscape Navigator 3.Ox/4.Ox (Mac OS Windows95) 

入手先： http://horne.netscape.com/ja/comprod/mirror/ 
index.html 、 他 


Microsoft Internet Explorer 3.Ox/4.Ox (Mac OS Windows95) 
入手先 . http://www.microsoft.eom/ie_intl/:ja/download/ 


Lynx 2.8 (MkLinux) — _ — — 

入手先： http://www.crl.com/~subir/lynx.html 、 他 

MacLynx 2.7.1b1 (Mac OS) 

入手先： http://www.lirnun.fr/-gutkneco/maclynx/ 

ホームページ . リーダー （ Windows95) 

A 手先 . tittps//www.ibm.co.3p/Kokoroweb / sns / 
hpr_down.html ( 体験版） 

※〇内は使用した環境 





Q $_ 方 


HTML の規格について —— 

本#の リファレンス 部分は、 W 3 C によって策定された 「HTML 3.2」を対象とし 
てぃます。ただし 、 HTML 3.2 では採用されてぃなぃものの、比較的使用頻度か肩 
ぃスクリプトとフ レーム 関連の要素にっぃては 、 HTML 4.0 に従った簡単な使用方 
法を紹介してぃます。なお、最後に Web ブラウザメーカーの独自拡張要素を若干 
取り上げていますが、これはその使用を推奨するものではありません。 


興本驪醞について 

見本画面は、特に断りがない限り Netscape Navigator 4 .Ox (Mac OS 版）のも 
のです。また 、 Mac OS 8.1 以下では通常日本語フォントのアンダーラインは表示 
されませんが、本许では別途ユーティリティ〇※）を用いて表示しています。 

なお、 Lynx の見本画面は、 Linux 上のウインドウシステムのものと、 Telnet 端 
末エミュレータを使用したものが混在してぃますが、実際に動作させているソフト 
ウェア、およひ"表示結果は全く同一のものです。 


※江幡太氏が開発されたフォント変更ユーティリティ 「Reliever zetaj 

入 ^^^ t •littp s / / www • e&c • co • jp / *"eb&t a / 

サンプル ソース- 

サンブルソースの掲載は、スペースや判読性の都合上、解説に必要な部分に限っ 
ています。したがって、省略しないことか S まれる要素や属性が省略されている場 
合もあります。ただし、できるだけ省略していることがわかるように、その旨を注 
記するようにしました。 


用 B について- 

本書は一般向けの害籍とぃう性格上、使用してぃる用語が SGML や HTML、JIS 
などの用語、日本語公用文の記法などと一致してぃなぃ場合もあります。これにつ 
いてはさまざまな問題があると思いますが、あらかじめご了承ください。 
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興出しについ r - 

見出しの上部には 、 Netscape Navigator 3 .Ox と 4. Ox 、 および Internet Ex 
plorer 3.0 x と 4. Ox の対応状況を示すラベルを付けてぃます。 

見出しには、要素名とタグの標準的な書式を載せてぃます（終了タグが存在しな 
いものについては、その旨を記述)〇また、当該要素の種類（ブロックレベル要素と 
テキストレペル要素）も示しました（どちらにも诚さなぃ要素もある）。なお、要素 
名は大文字 • 小文字のどちらを使用しても構ぃませんが、本書では全て大文字で統 
一しています。 

見出しの下部には、当該要素の内容となる他の要素、及び親要素を HTML 3.2 
の範囲で列挙しましたレ※）。列挙した順番は、ほぼ HTML 3.2 の仕様#に記載さ 
れてぃる順序にしたがってぃます。また、途中の改行は、要素の種類（主にブロッ 
クレベル要素とテキストレベル要素）の区切りを表しています。 

《DIR • MENU 要素は、ほとんど使用されることがないので （） 付きで列挙しています 
( P . 63参照)。また 、 XMP • LISTING • PLAINTEXT 要素は、新規に作成する HTML 
文害では使用を避けるよう求められていますので、一覧には戧せていません （ P . 85参照)。 


1IIBB 

[TABLE_ 


H Web ブラウザの対応状況を示す） 




» 


amm 

の意味や機. 


要素の意味や機能の概要を解説しています0また、必要に応じてサンプルソース 
や見本画面を載せている場合もあります。 


要素の概要 


i6 


TABLE 要素は HTML 文害で表組を行う要素です。開始夕 ^< TABLE > と終了 
タグ</丁六8し已> によ つて 表の範囲をマークアップします。 



本書の使い方 


属性一霣 

要素の厲性と簡単な説明、 Web ブラウサの対応状況を一锭表形式にまとめまし 
た。属性名は、大文字•小文字のどちらを使用しても構いませんが、本書では全 
て大文字で統一しています。また、属性値は、原則として小文字を使用しています 
(値が固定されていない場合は、適当な変数を値の欄に®き、イタリック表示して 
あります)。 

なお、 K 性には 一般によ く知られたものでも、実は Web ブラウザメーカー によつ 
て独自に拡張されたものもあります0それらを使用すると、 HTML3.2 の文#型宣 
言が行えなくなりますので、铋性ごとに HTML 3.2 規格に含まれているかどうかも 
示してあります。 


1厲性名1 

IALIGN (初期僅 


[Netscape Navigater 4.0X I ~ 1 1 Internet Explorer 4.0X | 



厲性は雀輅可 


記号について 
〇：対応 

x :未対応 0* 性が HTML 3.2 規格に含まれる場合） 

- :未対応 0* 性が HTML 3.2 規格に含まれない場合) 
! : Web ブラウザメーカーが独自に拡張した厲性 


属性鱒說 

属性一览で挙げた属性について、その意味や具体的な使用方法 • 結果を解説し 
ています。また、必要に応じて、サンブルソースや見本画面を載せています0 


plfSlH 


•ALIGN 属性 

表の位 K 揃えを指定します 

ALIGN « 性を？ ? 略した場合、 Web ブラウザなどアブリケーシヨン俩で left が与 
えられます。 


<TABLE fALIGN»" right - ALIGN 属性の指定 



<TR><TD> 1 </TD><TD> Z </TDxTD> 3 </TDxTD> 4 
</TD></TR> 


<TR><TD> 5</TD><TD> 6</TD><TD> 7</TD><TD> 8 
</TDx/TR> 

</TABLE> 
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璗獲な用思- 

• IETF (Internet Engineering Task horce) 

インターネツト技術特別調査委員会。インターネツト上で使用されるブロトコルなどさまざまな規 
格案を出して標绝化を行い、それを RFC (Request for Comments) t して公開しています0 

•W3C (World Wide Web Consortium) 

WWW の標 iff 化と推進のために設けられた国際的な学術研究組織で、現在では200を超える企 
業や団体、政府機関などが会员として参加しています。また、ホスト憷閲としては、マサチューセ 
ツツエ科大学計裨饯科学研究所 （MIT/LCS)、 フランス国立.悄報処理自動化研究所 （INRIA)、 礙 
應義热大学 SFC 研究所の3つがあり、それぞれの担当地区（北米、欧州、アジア）の W3C の活動を 
とりまとめています。 


• ISO (International Standards Organization) 

M 際標嵊化機«。1947年に没*された、工業製品の W 際的な統•规格を策定に関わる機関。ま 
た、1987年から電気 • 電子部門は IEC (Iniernalional Electrotechnical Commission :国際電気 
掠ザ•会 》) 力兜当しています。 


• プロトコル (Protocol) 

ネットワークは、 nu こ物理的にケーブルを接较しただけでは使用できません。灾際にデータのやり 
取りを行うためには、そのための手順などがきちんと規格化されていなくてはなりません。この規格 
化された手順をブロトコルといいます0 


HTTP (Hyper Text Transfer Protocol) 
HTML 文書の転送に使用されるプロトコル0 


•Web ブラウザ (WWW Browser) 

HTML 文#を読み込んで、マークアップを手がかりに文 ft 構造を解釈して利用するアブリケーシ 
ヨンのうち、モニタ I 由 j 面に表示することを主目的としたものを一般に 「 Web ブラウザ」と呼んでい 
ます。 


• リソース (Resource) 

WWW では情報資源のことを指します。 HTML 文奔はもちろん、画像や動画、サウンド 、 Java 
Applet などさまざまなデータか 1 J ソースとなります。 

• URL (Uniform Resource Locator) 

WWW サーバにあるリソースのありかを示すための文字列。 URL の先頭はリソースへのアクセス 
に使用するブロトコル名（スキーム： Scheme ) とコロン（:）で始まります。ブロトコルは HTTP 以外 
にも FTP や SMTP 、 Telnet など WWW で使用可能なものであれば全て記述できます 0 つまりブロト 
コルが異なっても、リソースへのアクセス方法は統一的に表現可能です 0 最近の Web ブラウザはさ 
i 8 まざまなブロトコルに対応しているため、そのありがたさをより実感できるでしょう0 
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HTML (The HTML element ) 


阅 ©► HEAD BODY 

- 

HTML 装素は、文爯型 宣言 以降の HTML 文害本体です。開始タグ < HTML > と 
終了タグ</^1丁\1し> の問には、 HTML 文#のへッダ悄報である HEAD 要素と、 
HTML 文#の本文である BODY 要素が蹬かれます。 

|埚始タグ < HTML > と終了タグ </ HTML > は共に将略可能です。これは HTML 文 
御の構造上その存在力雛測可能なためですが、ソースの見やすさを考通:して省略し 
ないようにしましょう。 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> 

<HTML> ^ -—— ^ [開始タグ _ 

<HEAD> 

HEAD 要素 （ HTML 文香のヘッダ情報〉 

</HEAD> 

<BODY> 

BODY 要素 （ HTML 文害の本文） 

</BODY> 

</HTML> ◄ - ■ _ ■■ た C 終了タグ I 





IN ': 

1 E 

；\ 

1 E 

3 

3 

4 

4 


HEAD 


<HEAD>^</HEAD> 


ヘッダ (The HEAD element ) 




(R) TITLE ISINDEX BASE STYLE SCRIPT 

> HTML 


HEAD 要素は、 HTML 文害のヘッダ情報です。 

開始タグ<14£八0> と終了タグ</14£八0> の間には、 TITLE 要素や BASE 要素 
など HTML 文書全体に関する基本情報を記述します。その基本情報は BODY 要素 
全体に適用されます。 

なお、開始タグと終了タグは共に省略可能です。これは HTML 文讲の憐造上そ 
の存在が推測可能なためですが、ソースの見やすさを考谢して省略しないようにし 
ましよろ0 


<HEAD> ^- 

く TITLE 〉 養老令概説 </TITLE> 
その他の HEAD 要素 

</HEAD> ^- 


宅始タグ 


基本要素 





關關 

BODY _ <BODY>-</BODY> 

向 ©► HI H2 H3 H4 H5 H6 
ADDRESS 

P UL OL DL (DIR) (MENU) PRE DIV 
CENTER BLOCKQUOTE FORM ISINDEX HR 
TABLE 

TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET IMG FONT BASEFONT BR MAP INPUT 
SELECT TEXTAREA SCRIPT 
一般的なテキスト 
HTML 


BODY 要素は、 HTM し文宵の本文です。 

開始タグく BODY > と終了タグ </ BODY > の間には、 HTML 文件の本文を記述し 
ます。 

開始タグと終了タグは共に省略可能です。これは HTML 文齊の憐造上その存在 
が推測可能なためですが、ソースの見やすさを考礅して省略しないことが普通です0 


く BODY〉 ^-1 開始 タグ 1 

BODY 要素 （ HTML 文害の本体文） 

</BODY> ◄ - - _ 終了タク H 


HTML 3.2 では、 BODY 要素の中に直接テキストレベル要素を置いても問題 
はありません （ P . 10参照）。ただし、文書の構造としてはいったんブロック 
レベル要素で区画を作り、その中に具体的なデータであるテキストレベル要 
素を置く方が自然です。 
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BODY 




m 

color 

未アクセスのリンク色を指定 

〇 

〇 

〇 


値 

働き 

H3 

N4 

14 

fixed 

背景イメージを固定 

- 

一 

! 


属性は省略可 




厲性は省略可 

•VLINK 




mz\cm 

123 

mm 

color 

既アクセスのリンク色を指定 



〇 




ISEI 


mm 

url 

背景イメージに使用する画像の URL を指定 


〇 

〇 


属性は省略可 


• BGPROPERTIES 


属性は省略可 


»ALINK 



働き 

H3 

N4 


color 

アクセス中のリンク色を指定 

〇 

〇 

〇 


厲性は省略可 


^BACKGROUND 


»=a 

•BGCOLOR 


color 


背景色を指定 


〇 


〇 


〇 


属性は省略可 


•TEXT 


mu 




■B 

color 

テキスト色を指定 


〇 

〇 


属性は省略可 


• LINK 


働き 


H 基本要素 
















HTML リファレンス 


HOPMARGIN 


値 


pixels 


働き 


上側マージン 


N4 


14 


属性は省略可 


• LEFTMARGIN 


値 


pixels 


14 


左側マージン 


厲性は省略可 

co/or= 色指定の 16 進数 （# rrggbb )、 または色名 ur/=URL 

p/xe/s=pixel 数 


属性解説 


•色の指定方法について 

基本的に先頭に「#」を付加した数値で指定します0その数値は RGB (光の3原 
色）の各色を256段階にし、16進数 （0 〜9の数字と A 〜 F のローマ字）2つの組み 
合わせ （16 X 16=256) で表現したもので、理論上256 X 256 X 256=16,77 7,216 
色を表現することができます。しかし、現実的には HTML 文#を表示する端末（コ 
ンピュータとは限りません）が16,777,216色の表示力可能とは限りませんし、たと 
え可能であっても正確に再現することはできません。そのため、あまり凝った色は 
使用しない方が無難です。 

なお、 HTML 3.2 では、基本的な16色 （ Windows の VGA パレットに採用されて 
いる標维色〉に関しては、16進数だけでなく、色名による指定方法も可能です。 


16 進数指定 色名 | 

黒色 

C0L0R=.#000000* 

COLOR='black' 

銀色 

co し or= - #cococct 

COLOR= silver - 

灰色 

C0L0R=.#80808CT 

COLOR=gray - 

白色 

COLOR= #FFFFFF B 

COLOR= , white , :ノ ■■■ 

栗色 

C0L0R='#800000 - 

COLOR='maroon' 

赤色 

COLOR=#FFOOOO B 

COLOR='red B ノて _l ■ 

紫 S 

C0L0R='#800080' 

COLOR='purple* 

紫紅色 

COLOR=#FFOOFF' 

COLOR=fuchsia - 

緑色 

C0L0R=#008000 B 

COLOR='green' 

ライム色 

COLOR=#OOFFOO B 

COLOR='lime' 魂 ; 讎 3 

オリーブ色 

C0L0R=#808000 B 

COLOR= olive' 

黄色 

COLOR=#FFFFOO B 

COLOR=yellow B 

濃紺色 

C0L0R=#000080 - 

COLOR=navy B 
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BODY 


16 進数指定 

色名 I 

胃色 

COLOR=#OOOOFF B 

COLOR=.blue_ 

■暗緑色 

C0L0R='#008080 B 

COLOR=teal B ■HBH 

水色 

COLOR=#OOFFFF - 

COLOR='aqua B 


その他の色に関しても色名で指定できる場合がありますが、 Web ブラウザメーカ 
一による独自拡張ですから、再現性の保証はありません。通常は16進数で指定し 
てください（独自拡張の色名と16進数の対応表は P .314 参照)。 

• BGCOLOR 属性 

Web ブラウザで HTML 文薄を表示する場合の背景色を指定します。色は16進数、 
あるいは色名で指定します。 

♦TEXT 属性 

Web ブラウザで HTML 文害を表示する場合のテキスト色を指定します。 BG 
COLORW 性や BACKGROUND 铖性で背景色を変更し、テキストか 1 ?c みにくくな 
る場合などに使用します。 

色は16進数、あるいは色名で指定します。 

• LINK 属性 

Web ブラウザで HTML 文邦を表示する場合、まだアクセスしていないリンクのテ 
キストやボーダー（画像の枠など)色（ホットテキスト色）を指定します0 
色は16進数、あるいは色名で指定します。 

•VLINK 属性 

Web ブラウザで HTML 文宵を表示する場合、既にアクセスしたことがあるリン 
クのテキストやボーダー（画像の枠など）色（ホットテキスト色）を指定します。 

色は16進数、あるいは色名で指定します。 

•ALINK 属性 

Web ブラウザで HTML 文書を表示する場合、アクセス中（マウスなどでクリック 
したとき）のリンクのテキストやボーダー（画像の枠など）色（ホットテキスト色）を 
指定します。 

色は16進数、あるいは色名で指定します0 


■基本雲 




2 章 HTML リファレンス 


ホットテキスト色 


U^HSEHZIHSSIlESSnHIiEEEIIDlOBnzni 


1104 J33SL 


= -#0000ff w J 


アクセス中のリンク色 


="# 008000 " 


< UL > アクセス済みのホットテキスト^) 

< LI><A HREF= "enuma.html _>> エ沼学 (vocal) </ Ax / LI > 
< LI><A HREF= "miyanaga.html "> 宮水治郎 （ guitar , mandolin, 
chorus) </ Ax / LI > 

< LI><A HREF=’kaxnata.html"> 鎌田雅人 (piano, keyboard # 
chorus) </ Ax / LI > 

< LI><A HREF="okamoto.html"> 岡本憤吾 (bass) </ Ax / LI > 
< LI><A HREF:"yoshida.html "> 吉田太郎 (drums) </ A ></ LI > 
</ UL > 

</B0DY> 


アクセス済みのホット | 
テキスト色（緑） 




Netscape ： BODY 見本 


ms み d み 



• 江 ;' S 学 ( vocal ) 

• 宮水洽郎 （ guitar , mandolin , chorus )- 
* .11 田雅人 （ piano , keyboard , chorus )， 
• 同本犋吾 ( bass ) 


ホットテ+ 
スト色（育: 


■ 吉田太郎 ( dmn ^) 

アクセス中の 
リンク色（赤） 


◄ ~~ 「背票色（ 白）1 

Web ブラウ tf 側の設定によって 
は、これらの厲性の指定は無視 
されることちある 


各種オブジェクトの表示例 
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BODY 



Lynx での表示例 


• BACKGROUND 属性 

Web ブラウザで HTML 文押を表示する場合、背贵に GIF や JPEG 形式の画像を 
使用することか•できます。その際、 BACKGROUNDS 性で画像の UR しを指定し 
ます。 



<UL> 

<LI><A HREF= "emixna.html"> 江沼学 (vocal) </Ax/LI> 
<LI><A HREF= "miyanaga.html "> 宮永治郎 （ guitar, mandolin. 


chorus) </Ax/LI> 

<LI><A HREF= "kamata.html "> 錄田雅人 (piano, keyboard, 
chorus) </Ax/LI> 

<LI><A HREF= _okamoto.html”> 岡本憤吾 (bass) </Ax/LI> 
<LI><A HREF= "yoshida.html ”> 吉田太郎 (drums) </Ax/LI> 
</UL> 

</BODY> 


^7 













2 章 HTMLII フアレンス 


□ ^=Nelscape ： BODY HFI 

R る M 1535 み iA みホ -A Ml ガイド SiS プリント 


- 、 


® /X/o (VOCdl ) 

•客永洽郎 (guitar, mandolin, chorus) 

_ 5 思 由相 人 （ piano, y^eyboaid, chorus 5 し 


◄ - 


• 向本悻吾 
• 吉田太郎 ( drama ) 






指定した 背祭、 イメー 
ジデータがく D 返し 表 
示され、 背景を埋める 


of I - ^ 、•名7今 


イメージを利用した背景 


• BGPROPERTIES 属性 

背贵イメー ジがスクロールしないように固定します0テキストや通常の画像など 
は固定されずスクロールします。 

Internet Explorer の独自拡張なので、••般の HTML 文#では使用しない方が 
いいでしよう。 

•TOPMARGIN 属性 

上側マージンを pixel 数で指定します 0 

Internet Explorer の独自拡張なので、一般の HTML 文#では使用しない方が 
いいでしよう。 

• LEFTMARGIN 属性 

左側マージンを pixel 数で指定します 0 

Internet Explorer の独自拡張なので、一般の HTML 文書では使用しない方が 
いいでしよう。 
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要輕概要 


HTML 文害内にコメントを記述する場合に使用する記号です0 
「く!--」 と「••>」に囲まれた部分は、 Web ブラウザではコメントとして解釈され表 
示されません。 

また、スクリプト言語やスタイルシートなどは、それらに未対応の Web ブラウザ 
で不用意に表示されるのを避けるため、コメントとして記述されます （ P .247 参照)〇 




コメントは表示されません 


コメントは表示されない 

「く!」はマークアップ開始記号、「••」がコメントの開始記号、そしてコメント本 
文、コメントの終了記号「••」が続き、妓後にマークアップ終了記号である「>」が 
置かれます。つまり〜で1組のコメントとして扱われます0もし、コメン 
卜の終了記号 「--」 か1己述されていないと、それ以降に続くテキス トは 全てコメント 
として扱われてしまいます0コメントを記述する際には、必ず 「--」 〜 「-•」 がセット 
になっているかどうか気をつけてください。 


巧 

















2 章 HTML リファレンス 


コメントの終了記号がない 


く コメント> 

< p > コメントは表示されませんく/ p > 







1 


間違ったコメントの記述例 



を正確に解釈する Web ブラウザの 
場合「<!••」以降が全てコメントとして認 
識されるため画面上には何も表示されない 





Netscape Navigator 4 で表示した例 


また、コメントの後ろ側（コメントの終了記号「--」の後ろ）には空白文字を掼く 
ことができます（空白文字以外は不可)〇そのため、複数のコメントを並べて記述す 
ることもできます。ただし、コメントの前側（「く!」と「--」の間）には、空白文字も 
置くことはできません。 



3〇 
















ilil 

TITLE 


<TITLE>-</TITLE> 


トル (The TITLE element ) 


(w) ©► 一般的なテキスト 

head 


要素奴概要 


TITLE 要素は、全ての HTML 文書に必須のへッダ情報です。 

開始タグく TITLE 〉 と終了タグ </ TITLE > によって、タイトルをマークアップし 
ます0 TITLE 要素の内容には、一般的なテキストが使用可能です（ただし、スクリ 
ブト言語の類は記述できない)。また、その性格上、 HTML 文書内に1っしか® く 
ことが" C きません。 

内容は HTML 文#全体の内容を端的に表せるものでなければなりません 。 Web 
ブラウザではウインドウのタイトルバーに表示されますし、「ブックマーク」や「お気 
に入り」の登録をした際に、その「タイトル」としても使用されます0あるいは 、 L 
yrix などテキストブラウザでは画面上に表示されますし、音声出力の場合にも本文 
とは区別して読み上げられます。たとえば、ホームページ•リーダーでは「〇〇 
( TITLE 要素の内容）を読み上げます」と本文の前®きに使用されます。さらに、検 
索サイトで使用されるサーチロボットも、 TITLE 要素を「タイトル」として認識し、 
自己のデータベースに登録します0 

なお、 TITLE 要素を日本語で記述する場合は、若干注意が必要です。というの 
は、一般的に HTML 文書では文字の符号化方式を META 要素 （ P . 41参照）で明示 
します 0 そのため、日本語の TITLE 要素か TV 1 ETA 要素の前にあると、 Web ブラウ 
ザによっては正しく日本語として解釈できなくなる可能性もあります。ですから、 
TITLE 要素を日本語で記述する場合は、 META 要素の後に置くようにしましょう。 


く META HTTP-EQUIV="content-type" CONTENT="text/html; 
CHARSET=iso-2022-jp B > ^ - 


く TITLE> 養老令概説（目次）く / TITLE 〉 


I 日本語タイトル〕 


この HTML 文書で使用され 
ている文字の符号化は ISO - 
2022- JP であることを示 
す （ P .309 参照） 


ヘッダ情報 
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2 章 HTMLII フアレンス 


|- TITLE 要素の内容はタイ 

| トルバーに f 示される 一 

□ . [丨丨1 III II m . を、 「 b 

R« A MHKM ホ -A Ml fSH f SfB _ プリント 

養老令概説一目次一 

第一卷 

官位令 

集二* 

TITLE 要索の表示例 














3 3 4J4 


ISINDEX <ISINDEX> ( 終了タグなし ) 


キ—ワ—ド検索 (The ISINDEX element ) 


阋空 
6133 ► HEAD 

- 

ISINDEX 要素は、1行分の入カテキストボックスを表示します0 
ユーザがキーワードを入力し、送信用のキー（一般的にはリターンキーなど）を押 
すと、キーワードが基 mURL ( BASE 要素で設定）のサーバに送信され、サーバ上 
の他のアブリケーシヨン （C G I スクリプトなど）に引き渡されます0 

また、 ISINDEX 要素は開始タグ <1 SINDEX > のみで表現される、いわゆる空の 
要素です。終了タグは省略ではなく、もともと存在しません。 

なお、入力文字数に制限はありませんが、入力可能な文字セットは 「ISO 8859-1 
(欧米の主要14言語をヵバーする文字セット）」に限定されます0つまり日本語は使 
用できません。これは、 ISINDEX 要素の内容は「記述される HTML 文捭の基_ 
URL が HTTP URL ( URL が HTTP スキームであること、つまり 「 http :// 〜」で記 
述される）であるときのみ使用できる」と定められているためです （ URL に使用でき 
る文字セットは ISO 8859-1 のみ）〇そのせいもあって、現在では一般的に ISIN 
DEX 要素は使用されず、 INPUT 要素 ( P . 179参照）雜用されています。 

- 


• PROMPT 


wr nvyiwir 1 

働き 


麵 

text 

入カボックスのプ□ンプト 



春 

fex r= —般的なテキスト 


厲性は省略可 


- 

參 PROMPT 属性 

入カテキストボックスの前に表示させるブロンブトを設定します0 
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2 章 HTML リファレンス 


<BASE HREF="http :/ /www.pmnp-inc.com/index.html"> 
<ISINDEX PROMPT: ■ キーワードを入力してください（欧文のみ ）" > 



ISINDEX 要索の使用例 


-J1 


















阅空 
0133►- HEAD 

- 

BASE 要素は、その HTML 文畨の絶対的な基準となる URL を設定します。以後、 
同じ文#内の相対 URL は、この URL を基準に認識されます0その性格上、できる 
だけ HEAD 要素内の一番般初に記述します。また BASE 要素を設定しない場合は、 
Web ブラウザは自動的に現在表示している文戡の URL を基準 URL として解釈しま 
す0 

必須の要素ではありませんが、 Web サイトの規模が大きい場合などは、ファイル 
を移動してもリンク関係が維持できるので、メンテナンス性をよくするために使用 
します0ただし、 BASE 要素を記述すると、当然リンク先 URL として HTTP スキ 
ーム名を含んだ絶対 URL が合成されるため、ローカルのハードディスクでのリンク 
確認作業ができなくなります （「 file :/// 〜」ではなく必ず 「 http :// 〜」となる)。した 
がって、一般の個人ユーザは使用しない方がいいかもしれません。 

なお、 BASE 要素は開始タグ < BASE > のみで表現される、いわゆる空の要素で 
す。終了タグは省略ではなく、もともと存在しません。 


か ame ィ arger ターゲットにする基準フレーム名 一 ！ ！ 

属性は必須 

ur/=URL 

frome ィ oae /= —般的なテキスト（先頭文字はアルフ アベッ トのみ） 


•TARGET 


厲性は必須 


AHRFF 


基準となる URL 


〇〇〇 


基準 URL (The BASE element) 


BASE 


<BASE> ( 終了タグなし ) 


ヘッダ情報 
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HTML II フアレンス 



属性解説 


• HREF 属性 

BASE 要素必須の属性で、基準となる URL を設定します。 BASE 要素が設定さ 
れると、それ以降に記述される相対 URL は、 全て 「基维 URL 」 +「 相対 URL 」 の絶 
J ナ URL として解釈されます。 


<HEAD> 

<BASE HREF="http :/ /www.pump-inc.com/water/ 
members.html"> 

</HEAD> 

<BODY> 

<UL> 

<LI><A HREF="enu/enuma.html"> 江沼学 (vocal) 

</A></LI> 

<LI><A HREF：*’miya/miyanaga.html" >宮永治郎 (guitar, 
mandolin, chorus) </Ax/LI> 

<LI><A HREF*’kama/kamata.html_> 鎌田雅人 (piano, key 
board, chorus) </Ax/LI> 

<LI><A HREFs^oJca/okamoto.html 11 》 岡本憒吾 (bass) 

</A></LI> 

<LI><A HREF»"yoshi/yoshida•html _>吉 田 太郎 (drums) 
</Ax/LI> 

</UL> 

(後略） 

》 BASE 要索以外の HEAD 要索 や A 要索の TITLE 厲性 などは 省略 



BASE 要索の使用例 
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BASE 


HTML 文書内での URL の記述方法には 2 種類あります。 

1つは、スキーム名（転送に使用されるプロトコル名など）部分も含めた完 
全な形で記述される「絶対 URLJ です。これはリソースの転送方法や世界 
中のどこに保管されているかまで、明確に表すために使用されます。もう1 
つは、スキーム名を記述しない「相対 URLJ です。こちらは現在表示（出 
力）されている HTML 文害と、同じディスク上に保管されているリソースの 
ありかを示す場合等に使用されます。 

なお、基準 URL より上位の URL (あるいはそれを経由する URL ) を相対 
URL で記述する場合は、「1つ上のディレクトリ」を表す「..」記号を使用 
します。 


index.html 



- 絶対 URL:http;//www.pump-i 



• 絶対 URL.http://www_pump-inc.com^vater/membefS.h 

<BASE HREF-'http7Awww.pomp inc.convwatef/mofr 
-<A HREF-*onu/emom.htmT>~</A> 

■ <A HREF-"miya/miyanaQa.htmr>—</A> ._ J 



基準 URL と相対 URL 


•TARGET 属性 

フレーム機能を使用する場合の、ウインドウの表示方法などを定義します 
( P .263 参照)。 
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SCRIPT 


<SCRIPT>-</SCRIPT> 




スクリプト (The SCRIPT element) 


( w ) ©► 一般的なテキスト（本文参照） 

► HEAD BODY 

- 

SCRIPT 要素は、使用するクライアントサイド • スクリプト言語 （ Web ブラウザ 
が解釈して実行するスクリブト）を宣言し、スクリプトを記述するために使用しま 
す。 HEAD 要素に铖しますが、必要であれば BODY 要素の中に置くことができ、 
個数にも制限はありません。 

開始タグく SCRIPT > と終了タグく/ SCRIPT 〉 によって、スクリプトをマークアツ 
ブします。 SCRIPT 要素の内容は他の要素の内容と異なり、空白文字の連続や夕 
ブ、「< J や「&」などの特殊な文字 ( P .310 参照）はそのまま認識されます（文字実体 
参照で記述すると、それはただの記号として認識される)。そして、妝初に「<」「/」 
の連続（終了タグの開始記号）か淡れた時点で、内容の終了として認識されます。 

また、 SCRIPT 要素に対応した Web ブラウザは、 SCRIPT 要素の内容を画面に 
表示せず、スクリプトとして認識•実行します。しかし、 SCRIPT 要素が BODY 
要素に蹬かれた場合、未対応の Web ブラウザではそのまま内容を表示してしまい 
ます0それを防ぐため、一般的に SCRIPT 要素の内容は「コメント」として記述さ 
れます。 

なお 、 HTML 3.2 では要素名が予約されただけで、正式に採用されたものではあ 
りません。実際に SCRIPT 要素を使用する場合は 、 HTML 3.2 ではなく HTML 4.0 
の規格に則って HTML 文書を作成する必要があります0スクリプトの概要は P . 246 
で触れますが、詳細は別途 HTML 4.0 やスクリプトの専門解説書をご贸ください0 


Ilil 

STYLE <STYLE>~</STYLE> 


スタイル (The STYLE element) 


(«) ©► 一般的なテキスト（本文参照) 
HEAD 


1 要素没概要 


STYLE 要素は、文書内で使用されるスタイルシートをまとめて設定するために 
使用します。 HEAD 要素内に置く必要がありますが、個数に制限はありません。 

開始タグ < STYLE > と終了タグく/ STYLE 〉 によって、スタイルシートをマークア 
ッブします0また、 STYLE 要素の内容は他の要素の内容と異なり、空白文字の連 
続やタブ、「<」や「&」などの特殊な文字 （ P .310 参照）がそのまま認識されます（文 
字実体参照で記述すると、それはただの記号として認識される）〇そして、敁初に 
「<」17」の速続（終了タグの開始記号）か波れた時点で、内容の終了として認識さ 
れます。 

また、 STYLE 要素は必ず HEAD 要素内に K かれるため、 Web ブラウザの対 
応•未対応に関わらず内容が表示されることはないはずですが、慎重を期して「コ 
メント」 として記述する 人 もいるようです。 

なお、 HTML 3.2 では要素名が予約されただけで、正式に採用されたものではあ 
りません。実際に STYLE 要素を使用する場合は 、 HTML 3.2 ではなく HTML 4.0 
の規格に則って HTML 文卉を作成する必要があります。詳細は別途 HTML 4.0 や 
スタイルシートの専門解説薄をご覽ください。 

isis=a - 

なし 

mmm - 

なし 


■ヘッダ情報 




mmm 

META <META> ( 终 7 タグなし ) 


文書情報 (The META element) 


( K ) 空 

C 21133 ► HEAD 

- 

META 要素は、文害に関するさまざまな基礎情報、たとえば文畨の作者や有効 
期限、キーワードなどを記述するために使用します。情報は通常「ブロパティ名の 
属性+ブロパテイ値の域性」のセツトで表現されます。 

また、 META 要素は私たち日本語使用者（というより、非西欧言語使用者）にと 
つては、文軎内で使用される文字の符号化方式の明示にも使用できる大変重要な 
要素です 0 ただし、個々の値に対するサーバや Web ブラウザなどクライアント側の 
動作についての細かい規定はなく、具体的にどのように動作するか、あるいは無视 
するかは各ソフトウェアに任されています。 

なお、 META 要素は開始タグ <META> のみで表現される、いわゆる空の要素で 
す。終了タグは省略ではなく、もともと存在しません。 

№=2 - 


參 HTTP-EQUIV 


1値 

働き 

H3 

N4 

14 | 

name 

情報名の設定 

〇 

〇 

〇 


属性は省略可 


• NAME 


|値 

働き 


N4 

14 | 

name 

悄報名の設定 

〇 

〇 

〇 


属性は省略可 


•CONTENT 


■値 

働き 

H3 

N4 

14 

data 

具体的な値の設定 

〇 

〇 

〇 




属性は必須 

ncm 7 e = アルファベット、致字、八イフン、ピリオド（先頭はアルファベットのみ 
NAME 属性は大文字小文字の区別あり） 


—般的なテキスト（大文字小文字の区別ありパラメータ値は除く） 


4〇 











META 

- 

• HTTP-EQUIV 属性 

HTML サーバが HTTP ヘッダで使用するフイールド名を設定します0値の先頭 
(名前開始文字）は「アルファべット」のみ、続く文字列（名前文字）は「アルファべ 
ット、数字、ハイフン、ピリオド」に限定されます0 ( P .8 参照） 

HTML 文畨内に META 要素と HTTP - EQUIV 诚性があると、サーバは Web ブラ 
ゥザなどのアブリケーシヨンから要求を受けて HTML 文書を送信する際、 HTTP へ 
ッダの指定されたフイールドに CONTENT 厲性で設定された値を入れて送信しま 
す。 

たとえば、 HTML 文#の符号化方式が ISO -2022 -JP (通称 JIS コード P . 309参 
照）である場合、以下のように META 要素を記述します。 



Web ブラウザから HTML 文搾の送信要求を受けたサーバは、まず HTML 文拽内 
に META 要素と HTTP - EQUIV 域性があるかどうかチヱックします。上記の例で 
は、サーバは HTTP へッ ダの Content - Type フイールドに 「 text / html ; 
charset = iso -2022- jpj という値を入れて、 HTML 文書と一緒に Web ブラウザへ 
送信します 0 この記述方法は 、 MIME ( P .59 コラム参照）の Content - Type フィー 
ル ドと 同じです 0 

受信した Web ブラウザは、 HTTP へッダの 「 Content - Type 」 フイールドの値を 
見ただけで、その HTML 文書の符号化方式が ISO -2022- JP であることがわかりま 
すので、画面表示や印刷の際の符号化方式を間違いなく選択できます0 

ところが、サーバによっては送信前に META 要素をチェックせず、符号化方式 
をパラメータ値に入れてくれないサーバもあります。もし、符号化方式が含まれて 
いない場合は、 HTTP の規定では、 Web ブラウザは「符号化方式は ISO -8859-1」 
と判断するよう求められています。もちろん、これでは日本語の HTML 文書を表示 
することはできません。 


■ヘッダ情報 
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2 章 HTMLII フアレンス 


そこで、 Web ブラウザの多くは 、 HTTP ヘッダの ConteiU-Type フイ ー ルドの 
パラメータ値が抜けていても、受信した HTML 文書の META 要素をチェックして、 
符号化方式を判定する機能を備えています。そのため、 HTML 文書内の META 要 
素に符号化方式が 1己述されていれば、表示の際の文字化けは防げるのです（古い 
Web ブラウザでは対応していないものもありますが…)〇 



符号化方式判定の流れ 


參 HTML 文書の文字コード判定 

























META 


では、 HTML 文書の META 要素に符号化方式の記述がなかったらどつなるでし 
ようか？ まず、サーバは HTTP へツ ダの Content - Type フイ ー ルドのパラ メータ 
値に符号化方式を含めることができません0サーバによっては、 META 要素の有無 
に関係なく、専用の辞書を使用して文書内容をチェックし、符号化方式を判定す 
るものもあります（中には文書のほんのさわりだけをチェックして判定を行う横着な 
サーバもあるようです )〇 これは 一見 親切なようですが、残念ながらこの判定は常に 
正しいとは限りません。 

また、 HTML 文書を受信した Web ブラウザは、仕方ないので独自の方法で符号 
化方式の判定を試みます 0 これか7見在多くの Web ブラウザに搭載されている「文字 
コードの自動判別機能」ですが、こ节じの通りこれはよく失敗します0特に日本語 
の場合 、 EUC (主に UNIX で使用される符号化方式）とシフト JIS(Mac OS や 
Wmdow S 95 などバソコンで使用される符号化方式）の判定は困難なようです 0 

以上、長くなりましたが、非西欧言語使用者にとって META 要素がいかに重要 
であるかおわかりいただけたかと思います。 

その他、一般的に使用される HTTP - EQUIV 厲性値（すなわち、 HTTP ヘッダの 
フイールド）には、 「 Expires 」 があります 0 これは指定された口時で有効期限が切 
れることを知らせます0 


く META HTTP-EQUIV="Expires" CONTENT="Sat # 15 Aug 1998 
15:00:00 JST"> 

上記の例では、これを受けた Web ブラウザは「この文#は1998年8月15日 15 
時（日本標辦•時）で有効期限が切れるので、それ以降はキャッシュからではなく才 
リジナルのデータをサーバから受信する」よう判断します。なお、 HTTP ヘッダに関 
する詳細は、 HTTP の解説密をご淀ください。 


■ヘッダ情報 





i 章 HTMUJ フアレンス 


フ 


埸所: 
イル MIME 


: html 


texVhtml 


タイプ： 
ソース：現在. 


ディスクキャッシュ (C 入っています 


3 —カルキ，ッ 
シュフ7イル 

e 終更新日均 
录紡更新日特 

内容サイズ 


cache 1178243」 

不明 

不明 

724 



META 要素に設定された 
有効期限 


L 


有幼期限：199碎8月1 5日(土〉1500:00 ] 

文宇セット： i5O-2022-ip 

セキュリティ：このドキュメントでは■音号化によるセキ: 
われていません。 


リティ保 M は行 


Netscape Navigator の「ドキュメント情報」の表示例 


もともと HTTP - EQUIV 属性はサーバのための属性でしたが、 Web ブラウザ 
が符号化方式の判定以外にも積極的に利用することもあります。 

たとえば、 「 Refresh 」 という値を用いると、指定した時間後に別の URL へ 
自動的に移動するような指示を Web ブラウザに対して行うことができます。 


<META HTTP-EQUIV="Refresh" CONTENTS"5; 
URL=http://www.pump-inc.com/index.html"> 


上記の例では、 5 秒後に 「 http :// www . pump - inc . com / index . htmlj に自動 
的に移動します。使い方によっては紙芝居的な Web ページを作成することも 
可能です。 

• NAME 属性 

NAME 诚性も情報名の設定に使用されます。 

サーチ エンジンな どでは、 META 要素の中に記述されたキーワードを頼りに検索 
を行ったり、索引を作成したりするものがあります。具体的な NAME 厲性の値は 
規定がありませんが、使用される文字にっいては、先頭（名前開始文字）は「アルフ 
ァベット」のみ、続く文字列（名前文字）は「アルファベット、数字、 ハイフン、 ピ 
リオド」に限定されます。一般的には 「 Key word 」 など洲吏用されています。 
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META 



また、最近では検索サイトのサーチロボットのチェックに対して制限をかける場 
合も META 要素が使用されています0その場合の NAME 尿性の値として 、 「RO 
BOTS 」 があります。 


<META NAME=-ROBOTS" CONTENT*"NOINDEX - > 

上記の例では、 CONTENTS 性で具体的に「索引付け拒否」を宣言しています。 
他にもリンク内容のチェックを拒否する「 NOFOLLOWJ などがあります。ただし、 
全てのサーチロボットが META 要素に対応しているわけではありません。 

•CONTENT 属性 

CONTENTS 性は、 HTTP - EQUIVW 性や NAMEW 性の具体的な値を設定し 
ます。 

使用例は HTTP • EQUIV 城性と NAME 城性の項をご览ください。 


ヘッダ情報 
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LINK 


： LINK> ( 終了タグなし） 


文書情報 (The LINK element) 




(w) ©I 


空 

HEAD 


- 

LINK 要素は、文#の作者への連絡先を表したり、複数の文害（リソース）間の関係 
(読み込みや印刷の順序など)、あるいは外部スタイルシートを指定するために使用 
します0必ず HEAD 要素内に置く必要がありますが、その個数に実用上の制限は 
ありません。 

直接画面表示などに関わる部分が少なく、また HTML 3.2 ではスクリブトやスタ 
イルシートに対応していないこともあって、 ff (極的に使用されることの少ない要素 
ですが、対応している Web ブラウザやアブリケー シヨンの ユーザにとっては重要な 
要素です 。 Netscape Navigator や Internet Explorer ではその効果がわかりに 
くいと思いますが、できれ I ね己述するよう試みてください。 

なお、 LINK 要素は開始タグ < LINK > のみで表現される、いわゆる空の要素です。 
終了タグは省略ではなく、もともと存在しません。 


• HREF 



type 

正顆の関係の種類 


〇 

〇 



値 


N 4 14 


link type 逆順の関係の棰頚 


〇 : 〇 

属性は省略可 
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LINK 


•TITLE 


■値 

働き 

H 3 

N 4 

14 

text 

リンク先リソースのタイトル 

〇 

一 

一 


属性は省略可 


•TYPE 


L 値 . 

働き 

H 3 

N 4 

14 

type 

外部スタイルシートの種類 

一 

! 

! 


厲性は省略可 

ur/=URL /»»/ cVpe = 文書間の関係の櫓類 / ype = スタイルシートの形式 
text —般的なテキスト 


rams - 

參 HREF 属性 

リンク関係か^:定されたリソース （ HTML 文科とは限りません）の URL を指定し 
ます。 

具体的なリンク問係の神:類については 、 REL • REV 尿性で設定します0 


籲 REL 属性 

当該 HTML 文禅から HREF 域性で指定されたリンク先リソース （ HTML 文害と 
は限りません）を見た場合の関係の種類を設定します0 LINK 要素は HEAD 要素の 
1っなので、 REL 域性の内容も HTML 文宵の「本文」としては表示されません。し 
かし、 Web ブラウザによっては ハイパー リンク • ナビゲーシ ヨン システムとして、 
別途表示されます 0 あるいは、リンク先のリソースを Web ブラウザにバックグラウ 
ン ドでリンク先文書にアクセスさせ（いわゆるデータの先読み)、表示時間の短縮を 
図るような使い方も想定できます。 

なお 、 HTML 3.2 であらかじめ規定されている値（関係の種類）には、以下のよ 
うなものがあります。 


値 内容 

top : 

トップ ページ （表紙）など 


contents : 

目次ページなど 


index : 

索引ページなど 


glossary : 

用語解説ページなど 


copyright : 

著作権に関する情報ページなど 


next : 

当該文書の次に移動すべきページなど 


previous : 

当該文書の前のページなど 



ヘッダ情報 
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HTML II フアレンス 





値 


内容 


help : ヘルプページなど 

search : 検索ページなど 



■ 職員令民部省関連条文 


1. g 部劣粂 
2主計费条 
3. 主税费粂 


画面上では何の変化ちない 
ので、 LINK 要索の存在恚 
钱が理解しに<い 


LINK 要索の使用例 



ktenn 



Lynx での表示例 

春 REV 属性 

当該 HTML 文書を、 HREF 属性で指定されたリンク先リソース （ HTML 文書と 
は限りません）から見た場合の関係の種類を設定します （ REL 属性と逆方向の関係 
を表す)。 

HTML 3.2 で規定されている値は REL 属性と同じですが、 REV 属性はそれ以外 
に 「 made 」 という値が使用することができます。これは当該文書の作者の連絡先な 
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どを明示するための値で、 HREF 属性には作者のメールアドレスなどを記述します0 
Web ブラウザによっては HTML 文書の持つ情報としてこの内容を表示し、簡単に 
作者へメー ルが出せる機能を持つものもあります0 


作者のメールア 




「ドキユメント情報 J の表示例 


Ikterm _ 

Infomation about the current document {fil of 2) 
You have reached the Infomation Page 

ILynx Version 2.8rel. 

■File that you are currently viewing 

c2 


el.2 

current 


Linknawe: LINK 見本 2 

UPL ： http ： //MMw.pt»p-inc.conAINK2.htiil 
Charset! iso- 2022 -jp 
Apache/1.2.6 
il Fri, 07 Aus 


Server: 


Date ： Fri, 07 Aug 
Last Mod: Sat, 08 Aug 
0wner(3) : »»ailto:nkiyc 
size: 28 lines 


1998 14:00:54 GMT 
1998 07:26:38 GMT 
.80.JP 


nornal 


rREV = - made ' HREF= B 

ルアドレス'」によって投定され 


たメールアドレスを表示し、 


簡串にメールを出すことができる 


Lynx の「文書情報」表示例 


春 TITLE 属性 

HREF 属性で設定したリンク先リソースのタイトル（情報）を設定しますが、 
際の表現方法に関しては、 Web ブラウザに任されています。 

































2 章 HTMLU フアレンス 


たとえば、 Lynx では REL 属性で表示されるナビゲーシヨンシステムの項目名称 
に使用されます。 


く LINK TITLE=* • 目次へ民る ■ REL="contents" HREP= 

"https / /www•heian.go.jp/mokuji.html"> 

<LINK TITLE* ■治 部 省 関連条文 ■ REL= "previous" HREF: 

"http: "www.heian.go.jp/shikiinn/05wosamuru.html"> 
<LINK TITLE=_ 兵部 省 関連条文 ■ REL="nexf HREF= 

"http: / /www.heian.go.jp/shikiinn/07tsuhamono.html ， > 
<LINK REVa"made" HREF*"mailto : nkiyohar^heian.go.jp"> 


-}] 


Netscape ： LINK 

見本3 


三=1」1， 


次 

ホ•ム Ml 

ガイ F 


プリント t 年 


6_ 職員令民部省関連条文 

目〉欠 


1. 民部雀粂 

2. 主計费条 

3. 主税赛奂 


一般的な Web ブラウザ 
では TITLE 厲性は表示 
されない 


TITLE 厲性の使用例 


- u 關出, 



■ • □ X 


ft 部朽問速条文兵部古明 i* 条文 

LINK 見本3 (pi Of 2> 

▲ 6. 

资畐今民部雀問連条文 


TITLE * 性の値はナビゲーシヨン 
システムの項目名称として活用さ 
れる （ P .48 の図と比較） 



Lynx での表示例 


參 TYPE 属性 

外部スタイルシートの種類を指定します0詳細は別途 HTML 4.0 かスタイルシー 
卜の専門解説書をご覧ください0 




















關關 

Hn (HI ,H2,H3,H4,H5,H6) <Hn>~</Hn> 


見出し (Headings) ブロックレベル要素 


向 TT I B U STRIKE BIG SMALL SUB SUP EM 

STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET IMG FONT BASEF 〇 NT BR MAP INPUT 
SELECT TEXTAREA SCRIPT 
一般的なテキスト 
0113 BODY 

DIV CENTER BLOCKQUOTE FORM TH TD 


見出し要素は、 HTML 文宵本文の見出しに使用します。開始タグ < Hn > と終了 
タグ </ Hn > によって見出しをマークアップします。 n は 1 〜 6 までの数値で、見出 
しのレベル（重要度）を表し、 H 1 は敁も重要度が满い見出しで、 H 6 は锻も重要度 
が低い見出しになります。 

また、見出しはブロックレベル要素の一種ですが、その内容にはテキストレベル 
要素と一般的なテキストのみ E くことができます0見出しを入れ子にしたり、他の 
ブロックレベル要素を® くことはできません。 

Web ブラウザでは一般的に見出しは太字で表示されます。また、数値が大きく 
なるほど、即ち重要度か7がるにつれて文字が小さく表示されます。しかし、これ 
は Web ブラウザがそう表示しているだけなので、それを頼りに見出し要素を文字飾 
りのために使用してはいけません0たとえば、多くの検索サイトで使用されている 
サーチロボッ トは、自動的にチェックした HTML 文害の概要を作成する際にこの見 
出し要素を利用します。そのため、いい加減な見出しをつけていると、検索サイト 
で自分の Web ページを正しく紹介してもらえなくなります。 


く Hl > 養老令概説一目次一 </ Hl > 
< H 2> 第一巻く/ H 2> 

く H 3> 官位令 </ H 3> 

く H 2> 第二巻く/ H 2> 

く H 3> 職員令 </ H 3> 
< H 3> 後宮職員令 </ H 3> 
< H 3> 東宮職員令 </ H 3> 
< H 3> 家令職員令く / H 3> 

…（以下略） 




出しレベル1 H 




I 見出しレベル2 1 C 


<見出しレベル3 I 





2 章 HTMUJ フアレンス 


B . Netscape ： H 見本 1 IBa 

:: 'i| _ M _ AimM ホ•ム _ «MI _ ガイ F _ S 鬱 _ プリント 

養老令概説- 

第一卷 4- 

-0 次 

- ( 見出しレベル11 

F 

I 

1 

□ 

B 以节 - 


( 見出しレベル21 

職貝 令 





ば 1 - 1 1:2； ^ : 


HI から H 3 要索の使用例 


なお、テキストブラウザでは文字の飾りやサイズが変更できないので、表示位® 
の調整（たとえば H 1要索が中央揃え、 H 3 要素がインデント）で表現することもあ 
ります。 


一般的に HI 要索は文書の見出し％タイトルとして使用されていますが、 
HTML 文害全体のタイトル（門柱の表札）を示す TITLE 要素 （ P .31 参照） 
と異なり、 H 1 要素は HTML 文害本文（屋内）の一要素です。検索エンジン 
は、 H 1 要素を「タイトル」ではなくあくまでも「見出し」として認識します 
し、閲 II 者が Web ブラウザでブックマークした場合にも H 1 要素の内容は反 
映されません。 TITLE 要素と H 1 要素の本質的な役割の違いには、注意が必 
要です。 


0HH2 


•ALIGN ( 初期値： left) 


|値 

働き 

N 4 

14 1 

left 

左揃え 

〇 

〇 

〇 

center 

中央揃え 

〇 

〇 

〇 

right 

右揃え 

〇 

〇 

〇 


属性は省略可 
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圖生解‘説 




く HI ALIGN = - center " > 養老令概説一目次一< / Hl > 
< H 2 ALIGN =" right "> 第一巻く/ H 2> 

く H 3> 官位令 </ H 3> 


>後宮職8令<頦 
>東宮職員令 </H 
>家令職貝令<“ 





ALIGN 属性を指定した例 






















ADDRESS <ADDRESS>^</ADDRESS> 


アドレス (The ADDRESS element) ブロックレベル要素 


阅 ©►=- P 

TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE 
INPUT SELECT TEXTAREA A IMG APPLET FONT 
BASEFONT BR MAP SCRIPT 
一般的なテキスト 
BODY 

DIV CENTER BLOCKQUOTE FORM TH TD 

ADDRESS 要素は、 HTML 文裨作者の連絡先や内容の問い合わせ先の記述に使 
用します。開始タグく ADDRESS 〉 と終了タグ</八0011£33> によってアドレスを 
マークアッブします。通常は HTML 文丼の末尾や先頭に [ S かれます。 

また、ブロックレベル要素の一 M ですが、 ADDRESS 要素を入れ子にしたり、他 
のブロックレベル要素を入れる ことは できず、テキストレベル要素と一般的なテキ 
ストのみ内容として骰くことができます（例外的にブロックレベル要素のうち P 要素 
のみ股くことができますが、あまり使用する必要性はないでしょう）。 

通常、 ADDRESS 要素はイタリック表示されます。また 、 HTML 3.2 では Web 
ブラウザでの表示の際には、前後に空白行が挿入されることを推奨していますが、 
実際には多くの Web ブラウザでは空白行は揷人されません。 

ご意見、ご感想を頂ければ助かります。 

< ADDRESS>PUMP inc. (webmaster^pump-inc.com) </ADDRESS> 
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ADDRESS 
























段落 (Paragraphs) ブロックレベル要素 


向 ©► TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
IMG APPLET FONT BASEFONT BR MAP INPUT 
SELECT TEXTAREA SCRIPT 
一般的なテキスト 

C 21133 ► BODY 

ADDRESS 

DIV CENTER BLOCKQUOTE FORM TH TD DD 
LI 


要素里概要 


P 要素は、 HTML 文#本文の段落を示す要素です。 

開始タグ < P > と終了タグく/ P > によって、1つの段落をマークアップします。終 
了タ ゲ < R > は省略することができますが、記述しておいた方が後々段落の区切り 
が羽確にわかるので、修正なども楽になると思います。 

P 要素の内容には、テキストレベル要素と一般的なテキストを K くことができま 
す。もちろん、画像や Java Applet などマルチメディアデータも含めることができ 
ます。というより、含める方が文捭の擀造として自然です （ P . 10参照)〇—方 、 P 
要素を入れ子にしたり、他のブロックレベル要素を氍くことはできませんので、注 


意してください。 


開始 


開始タグ < P > の後ろに何らかのブロックレベル要素が現れると、その直前に 
終了タグ</卩>の存在が自動的に推定されます。そのため、終了タグ </ P > の 


省略が可能となります。 


< P > 右の御画日は中務省に留めて案と為せ。別に一通写して印署して太政官に 
送れ。大納言は覆奏せよ。画可（天皇が茛筆で「可」と害く）が吃れば留めて 
案と為せ。さらに一通写して詰げ訖れば施行せよ。く/ P > 

< P > 中務卿がもし不在ならば、大輔の姓名の下に「宣 J と注し、少輔の姓名の 
下に「奉行」と注せ。大輔が不在ならば、少輔の姓名の下に併せて r 宣奉行 j 
と注せ。もし少輔も不在なら余官の見在者が並びて此に准ぜよ。 </ p > 
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p 


〇 Netscape P 見本 1 HE 


こ 「*■う *» みみホ -a m ihf sm プリント t キ i リ y ィ Q 

右の则画日は中孩省に齧めて案と為せ。 Si] に一 ii 写して印塞して太«莒(こ送れ。穴讷 1 
は覆赛せよ0画可（天至が哀里て - 『可 J と者く）が12ればめて案と為せ0さらに一 51 
写して話げ 12 れぱ施行せよ。 

中技卿がもし不在ならば.穴 1 員の妗名の下に「亘 j と注し，少 II の姓名の下に「要行 j 
と注せ。穴 1_ が不在ならば、少«の好名の下に併せて『亘驀行 j と注せ0もし少播も不 
在なら余莒の見在者が tt ぴて此に龙せ-よ。 

II 

段落の区切りを表現するために空白行が使用される。 
また、ウインドウの端で内容が自動的に折 0 返し表示- 
される。 これらは W3C が推奨する表示方法ではあるが、 
実際には Web ブラウ tf の機能に依存する 


p 要索の表示例 


P 要素が表示の際に作成する空白行は、「段落の開始行頭をインデントしない場 
合は、段落を空白行で区切って明示する」という英文の段落表現の1つです。しか 
し、一般の英文では段落の開始は行頭のインデントで表現しますので、英文を見愼 
れた人にも違和感があるでしょう。 

このような段落表現は、初期の Web ブラウザにハイフネーシヨンやワードラップ 
の機能がなく、インデントによって満足に段落を表現することができなかったこと 
に起因しています0古い HTML 文#作成ツールの中には、この特性を利用して空 
白行を作るために < P > タグを揷人するものがありますが、現在では多くの Web ブ 
ラウザは内容のない P 要素を無視しますし、文押の構造上も矛盾していますので、 
このような P 要素の使用方法は避けてください0 


Mi=a 


•ALIGN ( 初期値： left) 



働き 

H 3 

N 4 

rn 

left 

左揃え 

〇 

〇 

〇 

center 

中央揃え 

〇 

〇 

〇 

right 

右揃え 

〇 

〇 

〇 


属性は省略可 


- 

•ALIGN 属性 

ALIGN 属性は段落の行揃え位置を指定します。 

厲性を省略すると初期値 left が与えられ、自動的に左揃えになります。 


1行と段落 







2 章 HTML リファレンス 


^- i ALIGN ^性 の指定例 j _ 

<P | ALIQN="right ")> 右の御画日は中務省に留めて案と為せ。別に一通写 
して印署して太政官に送れ。大納言は覆奏せよ。画可（天皇が窝筆で「可」と 
害く）が訖れば留めて案と為せ0さらに一通写して詰げ訖れば施行せよ。 </ P > 
< p > 中務卿がもし不在ならば、大輔の姓名の下に r 宣 j と注し、少輔の姓名の 
下に「奉行」と注せ0大輔が不在ならば、少輔の姓名の下に併せて「宣奉行」 

と注せ。もし少輔も不在なら余官の見在者が並びて此に准ぜよ。 </ p > 


□ 


m Netscape ： P 見本 2 画 

__ 0B 

EL ** 


b\k9^ ホ -A M 

1 n| 


右の洳画日は中務省に毡めて案と為せ。別に一通写して印塞して太 a 芎に送れ。穴31内言 
は覆券せよ。画可（天里が茛筆で r 可 J と#〇がれぱ S めて案と為せ。さら(こ一通 

写して話 ( fK れぱ施行せよ 




中孩卿がもし不在ならば、穴«の妗名の下に「苴』と注し、少«_の好名の下に r 赛行』 
と注せ。穴«が不在ならば.少 I * の妗名の下に併せて「苴赛行 j と注せ。もし少 W も不 
在なら余莒の見在者が在び•て此に龙ぜ■よ。 


〔 AUGN = Vighn こよる右揃え 


ALIGN 厲性の使用例 


また、 DIV 要素や CENTER 要素の内容となっている場合は、诚性を竹略すると 
そちら（親要素）の城性値が適用されます。 


(<DIV ALIGN=”center - l _ DIV 要索で中央揃えを指定 

< P > 右の御画日は中務省に留めて案と為せ。別に一通写して印署して太政官に 
送れ。大納言は覆奏せよ。画可（天皇が庚筆で「可 J と書く）が訖れば留めて 
案と為せ。さらに一通写して！ SlfK れば施行せよ。 </ P > 

< P > 中務卿がもし不在ならば、大輔の姓名の下に「宣 J と注し、少輔の姓名の 
下に「奉行」と注せ。大輔が不在ならば、少輔の姓名の下に併せて「宣奉行」 

と注せ。もし少輔も不在なら余官の見在者が並びて此に准ぜよ。く/ P > 
</ DIV > 


58 









p 



じ-マ：可承^^^ 

上し 

piEHB 

IQIEIS9ES9BC3IE33I 

3 n ] 


右の御画日は中務省に留めて案と為せ。別に一通写して印署して太 K 莒に送 
れ。穴吶言は覆奏せよ。画可（天呈が宸肇で『可 j と害く）が訖れば留めて案 
と為せ0さらに一通写して話げ訖れぱ施行せよ。 




漂がもし不在ならば、穴賴名の下 (c 


と注せ。 
せ〇ち C 


亘 J と注し、少 W の姓名の下に 
大«が不在ならは-.少 ifi の姓名の下に併せて『直奉行 j と注 
少 M も不才 


て在なら余莒の見在者が曲ぴて此に准せ-よ< 


DIV 要索の]*性値（例では center) がそのまま継承 Gg 用）される 


DIV 要索の使用例 


Column MIME について 


インターネットは米国生まれのため、メールシステムも基本的には 
ASCII 文字セットしかサボートしていません。それでは英語以外の言語使 
用者は困りますし、テキスト以外の画像や動画となるとなおさらです。そ 
こで、考案されたのが MIME (Multipurpose Internet Mail Extensions ) 

という仕組みで、メールのへ ッ ダにさまざまなフイールドを付力卩してメール 
の情報を明示し、アプリケーションが取り扱いに困らないようにします。 

この MIME の仕組みはメールシステムの他にも、いろいろな場面で使用 
されます （ HTML 文書を転送ためのプロトコルである HTTP など）。なお、 
以下に簡単にフィールドとその値の記述例を示しますが、詳細については、 
別途ネットワーク関連の解説軎をご覧ください0 

• MIME - Version : 1 .0 
MIME のバージョン。 

• Content - Type : text / plain ; charset = iso - 2022 -jp 

受信側のアプリケーションがデータを元通りに復元するための情報が 
「データタイプ/サブタイプ」の形式で記述されます。また、文字の符号 
化方式や添付ファイルの名前、その他の情報がパラメータとして付加され 
ます。 

• Content - Transfer - Encoding : 7 bit 

データ転送時の変換方式。 MIME に対応したメールソフトは、通常送信 
時に元の文字を全て ASCII 文字に変換しますので 「7 bit 」 と記述されます。 
また、添付ファイルでは変換方式が記述されます。 

• Contend - ID : < id 4542850590 @ heian . go . jp > 

メールの識別用の ID です。 

• Content - Description : inline ; filename =" waterbed . jpg " 

添付 ファ イルがある場合などに、データの説明が言己述されます。 











BR 


<BR> ( 终 7 タグなし ) 


強制改行 (force 


BRake) 


向 ©►空 
6113 ► BODY 


HI H2 H3 H4 H5 H6 
ADDRESS 

P DIV CENTER BLOCKQUOTE FORM CAPTION 
TH TD DT DD LI 

TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET FONT 


- 

BR 要素は、強制改行のために使用される要素です。 

HTML 文#では、リターンキーを押してテキストを改行しても、 Web ブラウザな 
どアブリケーシヨンはそれを無視するよう決められています。したがって、必要が 
あって改行を表現したい場合には、 BR 要素を用います。たとえば、長すぎる段落 
を読みやすくするために形式的な段落を作成する場合、あるいは段落内で箇条#き 
したい場合などに使用します。 

なお、 BR 要素は開始タグ < BR > のみでマークアップされる、いわゆる空の要素 
です。終了タグは省略ではなく、もともと存在しません。 


<P> 養老田令において、在外諸司の職分田は以下の通り規定されています。 
</P> 

<BLOCKQUOTE> 凡そ在外諸司の職分田は、大宰の帥に十町、大武に六町、少 
弍に四町、大監 • 少監 • 大判事に二町、大工 • 少判事 • 大典 • 防人の正•主 
神 • 博士に一町六段。少典 • 険限師 • 医師 • 少エ • 算師•主船•主厨•防人 

の佑に一町四段。諸令の史に一町。史生に六段。 <BR> ◄ - [ 開函夕之 ] 

大国の守に二町六段、上国の守 • 大国の介に二町二段、中国の守 • 上国の介 
に二町、下国の守 • 大上国の掾に一町六段、中国の掾 • 大上国の目に一町二 
段、中下国の目に一町。史生は前の如し。 </BLOCKQUOTE> 


6〇 




荄老田令において.在外詫司の糂分田は以下の通 y 規定されています。 

凡そ在外諸司の«分田は、穴事の帥に十 IT、 大武に六 IT. 少式に四町. 
穴監 • 少監 • 大利塞に二町.大工-少利蓁 • 穴典 • 防人の正-主神•博 
士に一町六拎〇少典 • 降賜 gifi •医» • 少エ•宜師•主 W •主® • 防人の 

佑に一町四13 〇 §1令の史に一打。史生に六13。 ◄ - 

穴国の守に二 》T 六段、上 S の守•穴国の介に二耵二段.中国の守•上国 
の介に二打、下国の守•大上国の捶に一打六 IS 、 中国の捸•大上国の目 
に一打二13、中下 m の目に一》1。史生は前の扣し〇 


強制改行される 1 


BR 要索の使用例 


MH1 - 

•CLEAR ( 初期値： none) 


left 

テキストの回り込みを解除（左側） 

〇 

〇 

〇 

right 

テキストの回り込みを解除（右側） 

〇 

〇 

〇 

all 

テキストの回り込みを解除（全部） 

〇 

〇 

〇 

none 

テキストの回り込みを制御しない 

〇 

X 

X 


厲性は省略可 


•4^’ 總 - 

•CLEAR 属性 

画像に対してテキストの回り込みがある場合 （ IMG 要素の ALIGN 城性）、 
CLEAR 诚性を設定することによって、改行と同時に回り込みを解除することがで 
きます。 

属性値 left は左側の画像に対する回り込みを解除し、 right は右側の画像に対す 
る回り込みを解除します。また、 all は両側の画像に対する回り込みを解除します。 

なお、属性値 none を設定した場合 、 Netscape Navigator と Internet Ex 
plorer は解釈できません。しかし、属性を省略することによって、その機能は実現 
できますので、実用上は問題はありません。 


行と段落 
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<p> 

<IMG SRC="wti. jpg" コイツは' 手か'つけられな 

い！！ く BR > x - [ CLEAR 厲性の指定 

全曲シングルかと思わせるクオリティく BR> ▼ ^ 

他のバンドとはひとまわり違うスケールく BR [CLEARS"left "V 
R&amp;B をべースにした実力派ブリットボップバンド <B>water く/ B> の 
1st アルバム r 奋跡の人」 (TOCT-10271) 

</P> 



CLEAR 厲性によるテキスト回り込みの回避 
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ilil 



<UL>~</UL> 


順不同リスト (Unordered 


ックレベル要素 


(W) ©► LI 

* 1個以上 
BODY 

DIV CENTER BLOCKQUOTE FORM TH TD DD 
LI 


- 

UL 要素は、順不同リストの要素です。主に順番がそれほど重要でないリスト 
(単なる筒粂#きなど）に用います。 

開始タグ <UL> と終了タグ </UL> によって、具体的なリスト項目をマークアッ 
ブします0その中には必ず1個以上の LI 要素 （P.71 参照）が含まれます0 LI 要素 
以外の要素を含むことはできません。 

なお、 HTML 3.2 には UL 要素と似た機能を持っ D1R • MENU 要素もあります。 
DIR 要素は階關型リスト、 MENU 要素はメニュー項目リストの要素です。 HTML 
3.2 では、 Web ブラウザはそれらしく表示することを求めていますが、ほとんどの 
Web ブラウザは UL 要素全く同一に解釈•表示します（現在使用されることはまず 
ありません)。 



ス 


< p > 孟夏条</卩> 

< UL > ^- 

< LI > 神衣祭 </ LI > 
<1|1>大忌祭 </ LI > 
< LI > 風神祭 </ LI > 
< LI > 三枝祭 </ LI > 
</ UL > ^- 



G 開始タグ] 


{[終了タグ〕 
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□ 

圍 Netscape ： UL 見本 1 

■ ■ ■ ■■ 

- 回日 

^：| mi 

fi 袤み iA みホ-ム 桷去 

ガイド 

~ 1 


孟夏条 


• 神衣祭 
• 大忌祭 
• 風神祭 
■ 三枝祭 


UL 要索の使用例 


なお、 Web ブラウザでは前ページのサンプル画像のように Lr 要素がインデントし 
て表示されますが、この表示方法は HTML で定義されているわけではありません。 
したがって、環境や Web ブラウザによって見え方が異なる可能性もあります。 


HTML にはテキストをインデントさせるための要素はありませんが、文香の 
内容によってはどうしてもインデントが必要なことがあるかもしれません。一 
部の HTML 文害作成ッールでは、 < UL >〜</ UL > タグでテキストをマークア 
ップしてインデントを表現しようとしますが 、 Netscape Navigator や Inter 
net Explorer ではインデント表示されても、他の Web ブラウザでもそうなる 
とは限りません。たとえば、 Lynx では単に < UL >〜</ UL > タグでマークアッ 
プしただけのテキストは表示が乱れます 0 また 、 Netscape Navigator や In 
ternet Explorer でも将来要素の解釈が JK 密になった場合、インデントされ 
なくなる可能性があります。 


< P > 凡そ天神地祇は神祇官が皆常典に依りて之を祭れ。 </ P > 

< UL > 天神とは伊勢、山城の鴨、住吉、出雲国造の斎く神の類のことである。 
また、地祇とは大神、大倭、葛木の鴨、出雲大汝神の類のことである。さらに、 
常典とはこの令に所載する各祭祀の条のことである。 </ UL > 


E T 々广ブニへ、二.：. ： -■- 昌 r 


0 B 


狀2 ▲ 


凡そ天神地祇は神祇官が皆に依リて之を架れ。 
天神とは伊15、山 W の fS 、 住吉、出菌 S 造の裔 
地祇とは大神、大倭、著^の H 、 也默; 

常典とはこの令(こ所教する各の条のミ 


奋く神の;5異のこと 

ことで« 
のことである0 


Lynx などでは、「順不同 
リスト」として認識され 
ないため表示も乱れる 


UL 要索のみでマークアップした例 
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circle 


行頭記号を•で表示 


行頭記号を□で表示 


行頭記号を〇で表示 


^ 〇 
厲性は省略可 


•COMPACT ( 論理型） 


値 


compact 


働き 


卜の短縮表示 



属性解説 


鲁 TYPE 属性 

Web ブラウザが表示する行頭記号の種類を指定します。 HTML ではなるべく 
disc は#、 square は口、 circle は〇で表示することを推奨していますが、強制で 
はありません。したがって、環境や Web ブラウザによって表示される記号が異なっ 
たり、区別できない場合もあります。あまり被密な再現性は期待しない方がいいで 
しょう0 

< P > 孟夏条く/ P > 

<UL TYPE =" disc "> 

< LI > 神衣祭 </ LI > 

</ UL > 

<UL TYPE =" square " 

<ム1>大忌祭 </ LI > 

< LI > 風神祭く/ LI > 

</ UL > 

<UL TYPE «" circle " 

< LI > 三枝祭 </ LI > 

</ UL > 










HTMLII フアレンス 

















順序づけリスト (Ordered List ) 


ブロックレベル要素 



> U 

* 1 個以上 


> BODY 


DIV CENTER BLOCKQUOTE 

FORM TH TD DD 

LI 

I 

■ 

リ 


要素_要 


0 L は順序づけリストの要素です。順番が重要な意味を持つリストに用います0 
開始タグ <0 L > と終了タグ </0 L > によって、リストの範囲をマーク アツ ブします c 
その中には必ず1個以上のリスト項目 「 LI 要索」 （ P .71 参照）が含まれます0 LI 要 
索以外の要素を含むことはできません0 


リスト項目 


< P > 詔香の起草から施行まで </ P > 

< ol >-^ - r 開始タグ d 

-► <1|1>内記が御所において草案を作成する </ LI > 

< LI > 天皇が哀筆で日付を記入し（御画日）、中務卿に給う </ LI > 

< LI > 中務省ではこれを留めて案とし、写しを作成する </ LI > 

< LI > 写しに中務卿、大輔、少輔が位署を加える </ LI > 

_ < LI > さらに内印を押して太政官に送る </ LI > 

< LI > 太政官では大納言以上が位署を加える </ LI > 

< LI > さらに施行を詔う文言と日付を記入し、大納言が天皇に覆奏する 
</ LI > 

< LI > 天皇が許可する埸合は、宸筆で「可』と記入する（御画可）く/ LI > 
-► < LI > 太政官ではこれを留めて案とし、写しを作成して施行する </ LI > 
</0 L >^ -1 終了タグ1 


星 S 考の起 S から施行まで 


内記が脚所において苴案を作成する 
天呈が哀肇て-日付を纪入し（脚函日）、中技 W に枯う 
中務省ではこれを留めて案とし、写しを作成する 
写しに中務卿、穴吼少 I ■が位署を加爻5 
さらに内 en を押して太 a 莒に送る 
太政莒では穴讷 I 以上が位塞を加える 

さらに施行を詔う文 I と日忖を纪 A し.穴妁首が天至に覆券する 
天呈が许可する埸合は，宸肇で「可 J と纪入す5 (8 睡耵〉 

太•て-はこれを留めて案と c . 写しを作成して斑行する 


アラビア数字で 
U ストに番号が 
振られる 


0 L 要索の使用例 










1 章 HTML リファレンス 


なお、 LI 要素はサンブル画像のようにインデントして表示されますが、この表示 
方法は HTML で定義されているわけではありません。したがって、環境や Web ブ 
ラウザによって見え方が異なる可能性もあります。 




•TYPE ( 初期値： 1) 



働き 


N4 


1 

番号をアラビア数字に設定 

〇 

〇 

〇 

a 

番号をローマ字小文字に股定 

〇 

〇 

〇 

A 

番号をローマ字大文字に設定 

〇 

〇 

〇 

i 

番号をローマ数字小文字に設定 

〇 

〇 

〇 

1 

番号をローマ数字大文字に設定 

〇 

〇 

〇 

«性は省略可 


•START ( 初期値： 1) 



き 

msm 

N4 

mm 

number 

開始番号の股定 

〇 

〇 

〇 


厲性は省略可 


•COMPACT ( 論理型 ) 



H3 

N4 



〇 

X 

X 


欄外 • 厲性は省略可 




菊?} - 

參 TYPE 属性 

Web ブラウザが表示する行頭番号の種類を指定します。 HTML では以下のよう 
に表示することを推奨しています0 


1 属性値 

番号の種類 


1 

アラビア数字 

1.2.3.4.5.6… 

a 

□ーマ字小文字 

a.b.c.d.e.f … 

A 

□ーマ字大文子 

A . B . C . D . E.F … 

i 

ローマ数字小文字 

i.ii.iii.iv.v.vi … 

1 

□ーマ数字大文字 

UUIUV . V.V 卜. 
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OL 


< P > 詔香の起草から施行まで </ P > TYPE 属性で番号を□ーマ数 

<0 L TYPE =" I "> ◄ -^字大文字に指定 

く LI > 内記が御所において草案を作成す るく/ 

< LI > 天皇が寅筆で日付を記入し（御画日）、中務卿に絵う </ LI > 

< LI > 中務省ではこれを留めて案とし、写しを作成する </ LI > 

< LI > 写しに中務卿、大輔、少輔が位署を加える </ LI > 

< LI > さらに内印を押して太政官に送る </ LI > 

く LI > 太政官では大納言以上が位署を加える< / LI > 

く LI > さらに施行を詔う文言と日付を記入し、大納言が天皇に覆奏する 
</ LI > 

< LI > 天皇が許可する場合は、宸筆で「可」と記入する（御画可） </ LI > 
< LI > 太政官ではこれを留めて案とし、写しを作成して施行する </ LI > 
</0 L > 


ISS の起蕙から施行まで 


内 K が 8 P 所において里案を作成する 
天里が： K * て••日打を E 入し （3 P ® 日〉.中孩! 
中務省ではこれを背めて窠と C . 写しを作成 
写 UC 中孩鄉、大 III 少 III が位*を加える 
さらに内 6 n を押して太•に迓5 
穴 air では大讷曾以上が位薯を加える 


中孩 W に柁う 
作成する 


さらに内 6 n を押して太 M 曹に迓5 

穴 a 畜では穴納曾以上が m * を加える 

さらに嫌行を13う文曾と日付を EAC . 穴的貪が天里に覆# 

天里が许可する壜合は、哀肇で • f 可 J と E 入す5 ( WS 可〉 

太矜1*ではこれをめて案とし、写しを作成して旖行する 


t が天里に*费する 


ーマ数宇大文 


号が振られる 


TYPE 属性の使用例 


:の起蓽 から施行まで 
内記が所において草案を作成する 
天皇が^で日付を KA し （ tf ® 日）、中梅 BP 
中格省ではこれを S めて*とし、5しを作成1 
写しに中网即、大輻、'>彬泡5を加える 
さらに内を J 甲して太 BT & (こ送る 


さらに内¢1を1甲して太 J 1 
太政官では大縮以 i :* 
さら(こ施行を詔う文言 


し 


【 天皇が許可する場合は、蘇で『可』 
太政百ではこれを留めて案とし、5しを • 


大好®が天皇に:！受1 
と KA する ( ill ® FT ) 
作成して液行する 


UL 要素と異なり番号は文字なので表現可 
能。ただし、一般的な Web ブラウザと異 
なり、インデントは表現されない 


Lynx での表示例 


•START 属性 

順序づけリストを任意の番号から開始したい場合、 START 厲性で開始番号を指 
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2 章 HTMLU フアレンス 


定します。初期値は1です。 

設定は全て数値で行いますが、 TYPE 属性の値によって Web ブラウザは以下の 
ように表示します。 


TYPE 属性の値 Web ブラウザの表示 


5 




TYPE 属性で□—マ字大文字 

< P > 詔害の起草から施行までく/ P > マ START 属性ではじまりを 

<0 L TYPE =" A " START =" 11 "> ^- 11番目の文字に指定 

<1|1>内記が御所において草案を作成する </ LI > 

< LI > 天皇が庚筆で日付を記入し（御画日）、中務卿に絵う </ LI > 

< LI > 中務省ではこれを留めて案とし、写しを作成する </ LI > 

< LI > 写しに中務卿、大輔、少輔が位署を加える </ LI > 

く LI > さらに内印を押して太政官に送る </ LI > 

< LI > 太政官では大納言以上が位署を加える </ LI > 

< LI > さらに施行を詔う文言と日付を記入し、大納言が天皇に覆奏する 
</ LI > 

< LI > 天皇が許可する埸合は、宸筆で「可」と記入する（御画可） </ LI > 
く LI > 太政官ではこれを留めて案とし、写しを作成して施行する </ LI > 
</0 L > 



START 属性の使用例 


•COMPACT 属性 

COMPACT 属性を指定することによって、 Web ブラウザにリストをできるだけ 
短縮表示するように指示できます。しかし、現実に COMPACT 属性ををサポート 







リスト項目 (List Item ) 


ブロックレベル要素 


阅 ©► P UL OL DL (DIR) (MENU) PRE DIV CENTER 
BLOCKQUOTE FORM ISINDEX HR TABLE 
TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE 
INPUT SELECT TEXTAREA A IMG APPLET FONT 
BASEFONT BR MAP SCRIPT 
一般的なテキスト 
UL OL 


要素 E 概要 


LI 要素は、 UL 要素や OL 要素の具体的なリスト項目です。開始タグ < LI > と終 
了タグ</し1> でリスト項目をマークアップします。終了タグ</し1>は省略可能です。 

Lr 要素の内容はブロックレベル要素とテキストレベル要素、一般的なテキストで 
す。ですから、たとえば LI 要素の中にさらに UL 要素、 0 L 要素、 DL 要素などを骰 
いて、入れ子にすることもできます。 

なお、 U 要素は必ず UL 要素と 0 L 要素の内容として使用します。単独で用いた 
り、他の要素の中で使用することはできません。 

< P > 詔害の起草から施行までく/ P > 

<0 L > 

< LI > 御所内における作業 
<0 L > 

< LI > 内記が草案を作成する </ LI > 

< LI > 天皇が庚筆で日付を記入し（御画日）、中務卿に給う 

</ LI > 

</0 L > 

</ LI > 

< LI > 中務省における作業 
<0 L > 

< LI > 御画日を留めて案とし、写しを作成する </ LI > 

< LI > 写しに中務卿、大铺、少輔が位署を加える </ LI > 

< LI > さらに内印を押して太政官に送るく/ LI > 
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</0 L > 

</ LI > 

< LI > 太政官における作業 
<0 L > 

< LI > 太政官では大納言以上が位署を加える </ LI > 

< LI > さらに施行を詔う文言と日付を記入し、大納言が天皇に覆 

奏する </ LI > 

< LI > 天皇が許可する場合は、宸筆で「可」と記入する（御画可) 

</ LI > 

< LI > 太政官ではこれを留めて案とし、写しを作成して施行する 

</ LI > 

</0 L > 

</ LI > 

</0 L > 




IS # の起莨から％行まで 

1. W 所内における作霣 

1内 k が m 案を作成する 

2天里が:*籮で日打を K 入 C ( WS 日〉、中務 W に拍う 

2 . 中務省における作累 

1伽画□をめて案と C , 写しを作成する 
2写 U こ中孩桁、穴 W 、 少1囊が位*を加える 
3さらにを if して太 « nr に送る 

3. 太 ai •における作累 

1穴 a 畜では穴 V ?曾以上が位*を加爻る 

2 さら(こ施行を13う文曾と日付を K 入 C . 穴納曾が天董(こ聚赛する 
3天里が许可する場合は、哀*て-「可』と E 入する （31® 玎〉 

4太•ではこれをめて案と写しを作成して施行す5 


LI 要索を入れ子にした表示例 


また、 UL 要素内で入れ子にし TYPE 城性を省略した場合、階 W に応じて自動的 
に行頭記号か艾化します。ただし、第3階層以下の記号は同一になります。 


< UL > 

< LI > 太政官 ◄ - 

< UL > 

< IiI > 左弁官局 ^ - 

< UL > 

< LI > 中務省^ - 

< UL > 

< LI > 中宮職 </ LI > ◄ — 
< LI > 左右大舎人寮 </ LI > 
< LI > 図窨寮 </ LI > 


第1階層 


第2階層 


第3階層 


第4階層 
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•TYPE (OL 内で使用する場合、初期値： 1) 




H 3 

N 4 



番号をアラビア数字に設定 

〇 

〇 

〇 

a 

番号をローマ字小文字に設定 

〇 

〇 

〇 

A 

番号をローマ字大文字に設定 

〇 

〇 

〇 

i 

番号を□ーマ数字小文字に設定 

〇 

〇 

〇 

1 

番号を□ーマ数字大文字に設定 

〇 

〇 

〇 


属性は省略可 


•VALUE ( 初期値： 1) 



number 開始番号の投定 * 〇〇〇 


厲性は省略可 

number= 数値 

Ipl^Pri - 

癱 TYPE 属性 

Web ブラウザが表示する行頭記号や番号の種類を指定します。楝類や指定方法 
は UL 要素や 0 L 要素と同じですが、同じ階树のリストの途中で種類を変更できる 
点が異なります。 


< P > 詔害の起草から施行まで </ P > 

<0 L > V 

<LI TYPE = "1"> 内記が御所において草案を作成するく/ LI > 


TXT * >， 

笛号ヾ 


7 数宇に指定 


< LI > 天皇が庚筆で日付を記入し（御画日）、中務卿に給う </ LI > 

<LI TYPE =" a "> 中務省ではこれを留めて案とし、写しを作成する </ LI > 
く LI > 写しに中務卿、大輔、少輔が位署を加える </ LI > 


< LI > さらに内印を押して太政官に送る </ LI > 

► <LI fTYPE »« i »^ 太政官では大納言以上が位署を加える< / LI > 

く LI > さらに施行を詔う文言と日付を記入し、大納言が天皇に覆奏する </ LI > 
< LI > 天皇が許可する場合は、宸筆で 「可」 と記入する（御画可） </ LI > 
< LI > 太政官ではこれを留めて案とし、写しを作成して施行する </ LI > 


</0 L > 


r 番号を□ーマ数字小文字に指定 i 
〇芎吞□ーマ字小文字に_^歪1 
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LI 


: Netscape ： LI 見本 3 




民る 


A 


HSR み* A み 


=^=\アルフア ベットで振られる 


セキ 




[H 


詔者の起苴から施行まで 


アラビア数字で 
振られる 


せおいて簞案を作成する^- 

や日付を記入 C (脚画日）、中孩咖こ給う 
これを留めて案とし、写しを作成する 


内 I 己が御所にお 
天里が哀莹で日 
中孩省ではこれを留めて案と 
写しに中務卿、大|荫、少|_が位署を加える 
さらに内印を押して太 K 莒(こ送る 
太政莒で•は大納 a 以上が位*を加える 

さらに施行を詔う文言と日付を記入 C . 大納言が天隻に覆奏する 
天呈が W 可する埸合は.哀筆で • 『可 J と纪入する（则®可〉 
太政莒て-はこれを留めて案と C . 写しを作成して施行する 


□ーマ数 
字で振ら 
れる 


TYPE 属性の使用例 


籲 VALUE 属性 

順序づけリストを任意の番号から開始したい場合、 VALUE 城性で開始番号を指 
定します。初期値は1です。基本的な機能や指定方法は 0 L の START 城性と同じ 
ですが、同じ階嗝のリストの途中で開始番号を変更できる点が異なります。 


< P > 紹害の起草から施行までく/ P > 

<0 L > ▼一 

<LI VALUE ="1"> 内記が御所において草案を作成するく/ LI > 

< LI > 天皇が庚筆で日付を記入し（御画日）、中務卿に給う </ LI > 
<LI VALUE ="11"> 中務省ではこれを留めて案とし、写しを作成する 

</ LI > A 


B 始番号 ; 



< LI > 写しに中務卿、大輔、少輔が位署を加ぇる </LI 
< LI > さらに内印を押して太政官に送る </ LI > 

<LI VALUE = "21">太政官では大納言以上が位署を加える 
</ LI > 本 


^開始番号を21 


1に指定 

する 


< LI > さらに施行を詔う文言と日付を8己入じ T 
</ LI > 

< LI > 天皇が許可する場合は、宸筆で「可」と記入する（御画可） </ LI > 
< LI > 太政官ではこれを留めて案とし、写しを作成して施行する </ LI > 
</0 L > 
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]_ Netscape ： LI 見本4 — 0 B 


r ：| 民る •欠 み ホ-ム 供条 ガイド 5 儐 プリント t キ a ■リ U 

詔者の起苴から施行まで 

[\/AI I IP トーア借茫六 tl 卜鬥卜 5 

号: 

)1 

1 VMLUt®Til し dv つ liu 疋 cM 1/ し開陌爸 

~~ (1 J 内5己か伽所において莨案を作成す6 

X 天呈が宸萤で日忖を記入し（访®日）、中沒卿に給う 
— Ul ) 中孩省て-はこれを毡めて案とし写しを作成する 

Ti 写し(こ中務卿、穴播、少1窮が位 S を加える 

12 さらに i^n をして太 m に送る 

L —(?]) 太政莒では穴納言以上が位塞を加える 

22 さらに嫌行を13う文言と日付を纪入し、穴納言が天里に覆奏する 

23天圼が许可する*合は、哀筆で • r 可 J と纪入する(131® 57) 

24 太找 "6 •て-はこれを铉めて案と0、写しを作成して施行する 



VALUE 厲性の使用例 


また、 TYPE 域性と組み合わせることもできます。 


< P > 紹窨の起草から施行まで </ P > 

<0 L > 

<LI TYPE -"1 B VALUE ^- l ” 内記が御所において草案を作成する 
</ LI > 

< LI > 天皇が裒筆で日付を記入し（御画日）、中務卿に給う* c / LI > 

<LI TYPE -- a " VALUE ^- l 11 》 中務省ではこれを留めて案とし、写しを 
作成する </ LI > 

< LI > 写しに中務卿、大輔、少輞が位*を加える </ LI > 

< LI > さらに内印を押して太政官に送る </ LI > 

<LI TYPE *-!- VALUE »"1"> 太政官では大納言以上が位署を加える 
</ LI > 

< LI > さらに施行を招う文首と日付を記入し、大納言が天皇に覆奏する 
</ LI > 

< li > 天皇が許可する場合は、宸筆で r 可」と記入する（御画可） </ li > 

< LI > 太政官ではこれを留めて案とし、写しを作成して施行する </ LI > 
</0 L > 


U .…■■… ^Motcr^no » ^ TT g ~ " ： - -- で'了 -— ； p] ^ 

jj|_M _ M — WWiA み_ホ•ム_ Ml _»ィ卩_ fifll _プリント t : ♦ュリ 0 


is # の起 m から施行まで 

1. 内纪が i 抑所において苴案を作成する 

2. 天里が哀肇で日忖を記入し （ Wfi 日）、中務 W (こ格う 

a . 中務省ではこれを苗めて案とし、写しを作成する 

b . 写し(こ中務 W 、 穴播、少嫌が位塞を加戈る 

c . さらに内01を If して太 iTi •に送る 

I. 太抒莒では穴讷言以上が位*を加える 

II. さら(こ施行を詔う文言と日付を i £ AC . 大納言が天隻に覆奏する 
也.天里が许可する埸合は，哀肇て • rsjj と記入する（御@可） 

vr . 太找芎ではこれを留めて案と C , 写しを作成して施行する 

TYPE 属性と VALUE 属性を組み合わせた例 


7^ 


















阅 ©► DT DD 

※いずれか 1 個以上 
6113 ► BODY 

DIV CENTER BLOCKQUOTE FORM TH TD DD 




DL 要素は用語の定義（説明）リストの要素です0開始タグ < DL > t 終了タグ 
</ DL > によって、定義リストの範囲をマークアップします0具体的な定義リストの 
内容は、定義される用語である DT 要素 （ P .81 参照）、その用語の定義である DD 
要素 （ P .82 参照）で構成されます。また、この DT 要素と DL 要素は通常セットで使 
用されます。 


<P> 凡そ天神地祇は神祇官が皆常典に依りて之を祭れ。 </P> 

<DL>^ - [ 開始タグ〕 

く DT> 天神 </DT>< - [ 用んデ"） 

く DD> 伊勢、山城の鴨、住吉、出雲国造の斎く神の類。 </DD>^— ( ^ | 

く DT> 地祇 </DTX - H 用語 

く DD〉* 神、大倭、葛木の鴨、出雲大汝神の類。 </DD >< ~ [ 定義」 

く DT> 常典く/ DT> ^ - ( 職 ) 

<DD> この令に所載する各祭祀の条。 </DD>^— { 定義 ] 

</DL> ^- 終了タグ 


Netscape ： C 

次 み* A みホ- 


ope ： DT 見本1 


凡そ天神地紙は神衹莒が皆*典に®リて之を祭れ《 


伊勢、山城の®、住吉、出雲国适の裔く神の類。 
穴神、穴倭、甚木の眹、出雲大泣神の類。 

この令に所 K する各祭祀の粂 0 


通常、改行されインデントされる 


DL 要索の使用例 
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なお、 DL 要素はサンプル画像のように DT 要素の後ろで改行、 DD 要素の前でイ 
ンデントして表示されますが、この表示方法は HTML で定義されているわけではあ 
りません。したがって、環境や Web ブラウザによって見え方が異なる可能性もあり 
ます。 


文法上は DT 要索と DD 要索のどちらか一方が1個以上あれば、違反にはな 
りません。また、複数の DT 要素に対して1個の DD 要素が、反対に1個の 
DT 要素に対して複数の DD 要素が存在する （ DD 要素の連続）こともできま 
す。ちなみに DD 要素の連続は HTML 2.0 では推奨されていませんが、 
HTML 3.2 では特にその是菲には触れられていません 。 HTML 4.0 では仕様 
害に DD 要素の連続使用例が載せてあるので、そのような使用方法も問題な 
いようです（たとえば、辞書などで1つの用語に対して複数の定義がある場 
合など)。 


— 

•COMPACT ( 論理型） 


compact 


U ストの短縮表示 


〇 


〇 


〇 


厲性は省略可 


•COMPACT 属性 

COMPACT 属性を指定することによって、 Web ブラゥザにリストをできるだけ 
短縮表示するよう指示できます。 COMPACT 诚性を指定する場合は、城性名は省 
略し属性値 「 compact 」 のみを記述します （ P .8 参照)。 


< P > 凡そ天神地祇は神祇官が皆常典に依りて之を祭れ。 </ P > 

<DL compact 〉 ^- COMPACT 属性の指定廢 

く DT > 天神 </ DT > 

く DD > 伊勢、山城の鴨、住吉、出雲国造の斎く神の類。 </ DD > 
く DT > 地祇く/ DT > 

〇0>大神、大倭、葛木の鴨、出雲大汝神の類。 </ DD > 

< DT > 常典 </ DT > 

く DD > この令に所載する各祭祀の条。く/ DD > 

</ DL > 






DL 



.....-— znetscape ： DL 

見本 1 画 

■ — 


mi 

次 み d みホ-ム 


ガイ？ 



凡そ天神地抵は?申抵官が皆帘典(こ依リて之を祭れ。 

▲ 

— 

天神伊努、山城の犋、住吉、出雲国适の裔く神の類。 


地抵穴神、大倭、莒木の稍、出雲大汝?申の類。 


常典この令に所栽する各祭祀の粂〇 



COMPACT 属性を指定すると、 




このような短縮表示になる 




COMPACT 厲性の使用例 


多くの Web ブラウザにおいて、 COMPACT 属性は DT 要素の長さが DD 要 
素のインデント幅より短い場合のみ表示に反映されます。しかし、 DD 要素 
のインデント幅自体は HTML に規定がありません。したがって、 COMPACT 
属性の有効性は 0B 境や Web ブラウザ、あるいは表示フォントの種類やサイズ 
によって異なります。閲覧者、およびその環境が限定されていない場合は、 
使用してもあまり意味をなさないこともあるでしょう。 


ス 


<DL compact > 

< DT >123456</ DT > 

< DD > 尋常の小事に用いられる勅命下達文 ^</ DD > 
< DT >1234567</ DT > 

< DD > II 常の小事に用いられる勅命下達文害 </ DD > 

</ DL > 


Netscape ： DL 見本 2 


0E 


民る 




み d みホ-ム 


M 金 


13 


123456臨 B 寺の大事に用いられる勅命下逹文者 
1234567 

寻常の小辜に用いられる勅命下逹文# 



DT 要索が6文字以下なら短縮 


表示が有効となる 


Mac OS 版の Netscape Navigator 4.0 で細明朝体 • 12ポイントを使用した例 
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HTML リファレンス 




Netscape ： DL 見本 3 


【 I^j | 

mSSSBSSSSSSSSSSSSSSSSSSSSSSSSBSSSmsssmi 


123456 

臨 B 寺の大辜 (こ 用いられる觔命下逹文者 
1234567 

_ 尋常の小辜に用いられる勅命下逹文# 

1_ブラウザ側のフォントを変えただけ 

で表示結果は異なってしまう 


表示フォントを Osaka • 12ポイントに変更した例 













用語 ( DefinitionTerm ) ブロックレベル要素 


阅 ©► TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
IMG APPLET FONT BASEF 〇 NT BR AP INPUT 
SELECT TEXTAREA 
一般的なテキスト 

0113 ►- DL 


要素の概要 


DT 要素は、 DD 要素で定義される用語です。開始タグ < DT > t 終了タグ </ DT > 
で用語をマークアップします。終了タグ </ DT > は、朽略町能です。 

必ず DL 要素の内容として使用されます。また、 DT 要素の内容はテキストレペ 
ル要素と一般的なテキストのみです。 





ilil 

DD <DD>^</DD> 


用語の定義 (Definition Description) ブロックレベル要素 


(W) ©► P UL OL DL (DIR) (MENU) PRE DIV CENTER 
BLOCKQUOTE FORM ISINDEX HR TABLE 
TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE 
INPUT SELECT TEXTAREA A IMG APPLET FONT 
BASEFONT BR MAP SCRIPT 
一般的なテキスト 
6113 DL 

- 

DD 要素は、 DT 要素の定義（用語の説明）です 0 開始タグ <DD>t 終了タグ 
</DD> で定義をマークアップします。終了タグ </00> は省略可能です。 

DD 要素の内容はブロックレベル要素とテキストレベル要素、一般的なテキスト 
です。ですから、たとえば DD 要素の中にさらに UL 要素、 0L 要素、 DL 要素など 
を敗いて、入れ子にすることもできます。 


< DL > 

< DT > 明神御宇日本天皇詔旨 </ DT > 

< DD > 

< UL > 

< LI > 隣国（唐）•蕃国（新羅など）への詔に使用（古記） </ LI > 
<1^1>蕃国への大事に使用（令議解、令集解、その他諸説） </ LI > 
</ UL > 

</ DD > 

</ DL > 
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DD 


DD 要索の使用例 

なお、 DD は必ず DL の要素として使用されます。単独で用いたり、他の要素の 
中で使用することはできません。 

HTML にはテキストをインデントさせるための要素はありませんが、文害の 
内容によってはどうしてもインデントが必、要なこともあるかもしれません。一 
部の HTML 文害作成ツールでは、 < DD >〜</ DD > タグでテキストをマークア 
ップしてインデントを表現していますが 、 Netscape Navigator や Internet 
Explorer ではインデント表示されても、 fife の Web ブラウザでもそうなるとは 
限りません。たとえば、 Lynx では DL • DT • DD の3要素がきちんと揃って 
いれば、それらは「定義型リスト要素 J として IS 織され DD 要素はインデン 
卜表示されますが、単に < DD >〜</ DD > タグでマークアップしただけのテキ 
ストはインデントされません。また 、 Netscape Navigator や Internet Ex 
plorer でも将来要素の解釈が厳密になった壜合、インデントされなくなる可 
有 g 性もあります。 


5^— 


B Netscape ： DD 

見本 2 

—— ■: ji 二 



m 筘み d みホ-ム 

梢去 ガイド 

InI 

... 


凡そ天神地抵は神抵莒が皆帟典に依リて之を祭れ。 

天神とは伊勢、山城の睹、住吉、出雲国适の斋く神の額。 


DD 要索の使用例 


□画 

^Netscape ： DD 見本 1 二 

■ _= 


民る 

霣菝み iA みホ -A 幘条 ガイド 

回 棟 

プリント m 


明神御宇日本天呈詔音 

〇陆国（唐）•蕃国（新羅など〉 への 詔に使用（古記) 
〇蕃国への大事に使用（令令集 K 、 その他諸説) 



< DD >〜</ DD > タグでテキストを マークアツ 
プしただけでインデント表示される 


< P > 凡そ天神地祇は神祇官が皆常典に依りて之を祭れ。 </ P > 

< DD > 天神とは伊勢、山城の W 、 住吉、出雲国造の斎く神の類。く/ DD > 


リスト 
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HTML リファレンス 


□ 


；myao 


HE 


DO 跡 2 ▲ 


装 に ㈣ Ri 離 


テキストブラウザの場合定義 
型リストとして認識されない 
ためインデントもされない 


Lynx での表示例 


どうしてもインデントが£、要であれば、単に < DD >〜</ DD > タグを使用するの 
ではなく 、 DL • DT • DD の3要素を揃えて見かけ上きちんと「定義型リスト要素」 
の体哉をとつておく方がいいかもしれません。 







PRE 要素は、内容が「整形済みテキスト」であることを示す要素です。 Web ブラ 
ウザで表示される際に空白文字や改行コード、タブが見た目のまま有効になります 
ので、簡堆な表やどうしても固定したレイアウトを維持しなければならない場合 
(たとえば很了•メールの本文をそのまま利用する場合など）に使用できます0また、 
レイアウトを維持するために、画面表示には等幅フォントが使用されます。 

開始タグく PRE > と終了夕 /</ PRE > によって整形されたテキストをマークアッ 
ブします0その中には0個以上のテキストレベル要素か、 • 般的なテキストが含ま 
れます0ただし、テキストに変換できない画像やフォントサイズを変更する恐れの 
ある要素は内容として使用できません。 

なお、同様の機能を持つ XMP • LISTING • PLAINTEXT 要素がありますが、 
これらは PRE 要素が策定される以前の名残です。 HTM し 3.2 では、新規に作成す 
る HTML 文宵では使用を避けるよう求められていますので、リファレンスの内容一 
览には載せていません （HTML 4.0 では完全に廃止されている）。ただし、 Web ブ 
ラウザによっては古い文書との互換性をとるために、これらの要素を認識できる場 
合もあります。 


< PRE > 4-1開始えグ] 

家令職貝令 

一品条 親王一品（内親王もこれに准ぜよ。但し文學はこの例にあらず） 

文學一人。家令一人。扶一人。大従一人。小従一人。大窨吏一人。 
少害吏一人。 


整形済みテキスト (PREformatted text) 


ブロックレベル要素 


K) TT I B U STRIKE EM STRONG DFN CODE 

SAMP KBD VAR CITE INPUT SELECT TEXTAREA 


011131 


A APPLET BASEFONT BR MAP SCRIPT 

一般的なテキスト 

BODY 

DIV CENTER BLOCKQUOTE FORM TH TD DD 


PRE 


<PRE>~</PRE> 


済みテキス 
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二品条 

二品 

文學一人。家令一人。扶一人。従一人。大窨吏一人。少書吏一人。 

三品条 

三品 


文學一人。家令一人。扶一人。從一人。害吏一人。 

四品条 

四品 


文學一人。家令一人。扶一人。従一人。害吏一人。 

</ PRE > 

1終了タグ _ 


□ _ Netscape ： PRE 見本1 _ _0 B 

みホ -A M ガイド プリント t ♦ユリ子ィ ノ Q 

篆令《霣令 

— 品灸 找至一品（内視王もこれに«ぜ■よ 0 但し文攣はこの例(こあらす〉 

文采一人。篆令一人。扶一又。穴&一人 • 小從一人 • 大#史一人。少售史一人0 

一〇灸 —° 

文 y —人 • 蓽今一人。扶一人。從一人。穴容史一人。少#史一人。 

=品 £« 

文4一入 • 搴令一人。扶一人 ◊ 從一人。容史一人。 

四品 ft eg 异 

文采一人。辜余一人。扶一人。從一人。#吏一人0 


改行や空白文字の連続 
がそのまま表現される。 

~w~ 

PRE 要素の使用例 


PRE 要素ではタブによるレイアウトも可能ですが、 HTML 文書作成ツールによ 
っては、タブを適当な数の通常の空白文字に厥き換えて整形するものがあります0 
そのため、作者の意図したレイアウトが崩れてしまうこともありますので、一般的 
にタブの使用は推奨されていません。少々面倒ですが、 PRE 要素にするテキストで 
は最初からタブの代わりに空白文字を使用しましょう。 

なお、何行にもわたるテキストを PRE 要素にした場合、改行位置によっては閲 
览者か 1壳みにくくなる場合があります。たとえば、モニタ画面の解像度が低い場合 
(あるいは表示フォントを大きくしている場合)、多くの Web ブラウザではウインド 
ウの端で自動折り返しされないため、横スクロールしなければテキストを読むこと 
ができません。かといって、早めに改行する（行を短く整形する）と、モニタ画面の 
解像度が商いユーザには間抜けなレイアウトに見えます0また、日本語フォントだ 
けのテキストの場合はあまり気にならないかもしれませんが、大量の欧文テキスト 
を等幅フォントで表示すると、美しくない上に非常に読みにくく感じる人もいます0 
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PRE 


「<」「>」 r"j など特殊な文字は、マークアップに使用される記号と同じなの 
で、そのまま HTML 文香内に記述しても表示することができません。この原 
則は PRE 要素においても同様なので、表示する場合は文字参照 （P.310 参 
照）という方法を使用します。 

PRE 要索で文字参照を使用する場合、その幅に注意します0文字参照の記 
述が数文字になっても、実際に表示されるのは1文字分です。 


<PRE> 



表示文字 

文字名 

文字実体参照 

&quot ; 

二重引用符 

&amp;qi 

&amp;am 

&amp; 

アンパサンド 

&lt; 

小なり 

&amp;It; 

&gt； 

</PRE> 

大なり 

&amp;gt; 




_ Netscope： PRE 昆本2 




プリ•ノト 


表示文芊 


二4引用袴 
アンパサンI 

.穴な9-- 


文芋輿时» 
tquot. 


.tgt; 


Mi=a 


w” ■ レ ■■■ \T/J7^n iia • 


KEH 

wm 

number 表示幡の指定 


X 

X 


画面に表示されるときには、実 
体参照が、参照元の文字に変換 
されるので位臛が揃う 




厲性は省略可 


mm)ber= 数値 




癱 WIDTH 属性 

WIDTH 属性を指定することによって、 Web ブラウザに表示幅を指示できます。 
しかし、現実に WIDTH 属性をサポートしている Web ブラウザはないようです。 
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H 整形済みテキスト 















向 ©► HI H2 H3 H4 H5 H6 
ADDRESS 

P UL 〇 L DL (DIR) (MENU) PRE DIV CENTER 
BLOCKQUOTE FORM ISINDEX HR TABLE 
TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE 
INPUT SELECT TEXTAREA A IMG APPLET FONT 
BASEF 〇 NT BR MAP SCRIPT 
一般的なテキスト 
■33 ► BODY 

DIV CENTER BLOCKQUOTE FORM TH TD DD 
LI 


要素 ^ 概要 


Web ブラウザで要素を位 K 揃えして表示するために、いくつかの要素には 
ALIGN 诚性が用意されています。たとえば、 P 要素で ALIGN 属性を使用すれば、 
1つの段落を丸ごと整列することか # できます。では、複数の P 要素を位骰揃えする 
場合は、侗々の P 要素に ALIGN 属性を指定しなければならないのでしようか？ 
いえ、そんなときは DIV 要素を使用するといいでしょう。 

DIV 要素は、複数のブロックレベル要素.テキストレベル要素.一般的なテキス 
卜をグルーブ化し、まとめて位置揃えする場合に使用されます。開始タグ < DIV > 
と終了タグ </ DIV > によってマークアップされた範囲は、 DIV 要素の ALIGN 属性 
に従って位置揃えされます。 



属性は省略可 
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属性解説 I 


•ALIGN 属性 

DIV 要素の位置揃えを指定します。属性値には left 、 center , right の3種類 
があります。属性を省略した場合は、一般的に left が適用されます。 


ALIGN 属性の指定 


<DIV[ ALIGNS "center"^ ^- ( 開始タグ1 

<P><IMG SRC-"kiseki.jpg" WIDTH="227" HEIGHT*"227" — 
ALT*"CD 「奇跡の人」の表紙画像があります _><BR> 

「奇跡の人 J water (TOCT-10271) </P> 

<P> コイツは、手がつけられない！！ <BR> fDIV 要秦の内容 

全曲シングルかと思わせるクオリティ。 <BR> 

他のバンドとはひとまわり 違う スケール。 <BR> 

R&amp;B をベースにした実力派ブリットボップバンド water の 1st アルバ 
ム〇 </P> 

</DIV> ^- __("終了タグ | 




要 

素 

の 


I 

プ 

化 

と 

位 

置 

揃 

え 


DIV 要索の使用例 



















關關 

CENTER <CENTER>~</CENTER> 


要素のグループ化と中央描 i え (textalignment) ブロックレベル要素 


阋 ©► HI H2 H3 H4 H5 H6 
ADDRESS 

P UL OL DL (DIR) (MENU) PRE DIV CENTER 
BLOCKQUOTE FORM ISINDEX HR TABLE 
TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE 
INPUT SELECT TEXTAREA A IMG APPLET FONT 
BASEFONT BR MAP SCRIPT 
一般的なテキスト 

61113 ► BODY 

DIV CENTER BLOCKQUOTE FORM TH TD DD 
LI 




CENTER 要素は、 HTML 文書内の特定の要素を他から区分し、中央揃えする 


ための要素です。 Netscape 社の独自拡張ですが、あまりにも普及したために仕方 
なく HTML 3.2 に採用されたものです。 

機能的には DIV 要素の ALIGN 城性に center を指定した場合と同じで、開始夕 


グ < CENTER > と終了夕 ^</ CENTER > によってマー クアッ ブされた範囲が中央 


揃えされます。 


なし 


なし 


9 〇 


1111 

BLOCKQUOTE <BLOCKQUOTE>~<BLOCKQUOTE> 


引用文 (quoted passage) ブロックレベル要素 


(W) ©► HI H2 H3H4 H5 H6 
ADDRESS 

P UL 〇 L DL (DIR) (MENU) PRE DIV CENTER 
BLOCKQUOTE FORM ISINDEX HR TABLE 
TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE 
INPUT SELECT TEXTAREA A IMG APPLET FONT 
BASEF 〇 NT BR MAP SCRIPT 
一般的なテキスト 
BODY 

DIV CENTER BLOCKQUOTE FORM TH TD DD 
LI 




BLOCKQUOTE 要素は、他の文磨から引用した文枰（テキストだけでなく画像 


なども含む）を明示するための要素です。開始タグ < BLOCKQUOTE > と終了タグ 


</ BLOCKQUOTE > によって引用文をマークアップします。 

内容にはテキストレベル要素や一般的なテキストだけでなく、ブロックレベル要 
素を含むこともできます。あまり使用する機会はないとは思いますが、 BLOCK 
QUOTE 要素を入れ子にして「引用文内の引用文」を表すこともできます0 

多くの Web ブラゥザでは、 BLOCKQUOTE 要素を表示する際に本文と区別する 
( 1つのまとまりとして取り扱う）ために前後に空白行を挿入し、インデントを行い 
ます 0 しかし、これはあくまでも Web ブラウザの表示機能によるものですから、 


BLOCKQUOTE 要素を空白行の揷入やインデントの目的で使用してはいけません0 


<P> 各軍団は基本的に 1 団が兵士 1 千人で構成された。その内部は兵士五十人 
で 1 隊となし、それを隊正が統括し、さらに 2 隊（計百人）を旅帥、 4 隊（計 
二百人）を校尉が統括した。また、軍団全体の統括者として大毅 1 人 • 少毅 2 
人が置かれた。ただし、養老三年に軍団兵士の削減が実施されたことに併せて、 
職員の数と呼称に以下のような変更があった。 </P> 




2 章 HTMLII フアレンス 


く BLOCKQUOTE 〉 - [ 開始タグ H 

<P> 軍団の兵が一千人に達している場合は、大毅 1 人、少毅 2 人を置く。六百 
人以上の場合は、大毅1人、少毅1人を置く。五百人以下の場合は、ただ毅1 
人を置く。 </P> 

<P MiIGN=_right■> 令義解「軍防令軍団大毅条」注釈より </P> 

</ BLOCKQUOTE > ^- f 終了 タグ ] 


Netscape ： BLOCKQUOTE 


HE 


mi 


霣»み* a みホ•ム 


ガイド 


® it プリント 


各軍団は*本的に1团が兵士1千人で•格成された0その内部は兵士五十人で -1 
傅となし、 それを咩正が統括し、さら(こ2» (計百人）を旅帥，4咩（計二百 
人）を校尉が JK 栝した〇また.軍団全体の統括者として大除1人•少殺2人が 
蛋かれた〇ただし、_老三年に軍団兵士の男啵が実施されたこと(こ併せて、枏 
貝の«と B 手杯に以下のような夏更があった0 

軍団の兵が一千人に逢している*含は.穴毅1人、少欲2人を® 

く。六百人以上の堆合は.大殺1人、少毅1人を里く。五百人以 


下の埸合は、ただ毅1人を里く< 


し空白行が入る 


〕T 


r 軍防令單团穴除 * 』注択よ y 


インデントが行われる| 


BLOCKQUOTE 要索の使用例 


□ . - ' 九 —. 


-0 H 


BLOCKQUOTE f 

各501は基本^こ1団が兵士1チ人で構成された0その内8财兵士五十人で1 
隊となしそれを W 正が統括し.さらに2味（計百人）を SWi 、m ( ti-S 
人〉を碰が統括した。また. 50全体の W 括者として大段〗人•州 2 人が 
屋かれた。 ただし、 養老三年(こ SS 1 兵士の«リ滅が!！施されたことに併せて.枏 
貝の放と〇神 R こ以下のような変更があった。 

531の兵がーチ人に逢している場合は.大 R 1 人、少»2人を屋く。六百人 
以 Ji の場合は、大人、少^人を屋く。五百人以下の填合は、 

人を置く。 

J 令;撕ょ9 


BLOCKQUOTE 要素の左側インデント置は少なく、右側 
はインデントされない。 BLOCKQUOTE 要索がインデン 
卜のための要素でないことがわかる 


Lynx での表示例 


% 

























向空 
6113 ►- BODY 

DIV CENTER BLOCKQUOTE FORM TH TD DD 
LI 

- 

HR 要素は、 1 つの文害内で話題か策わったり意味上の変化がある場合、その区 
切りを明示するために使用します 0 Web ブラウザではその名の通り水平線が表示さ 
れます。また、音声読み上げ機能を持つ Web ブラウザゃ專用アプリケーションなど 
では、 HR 要素に遭遇すると読み上げに間を阀いて文裨の区切りがわかるようにし 
ます。 

HR 要素は、開始タグ < HR > のみでマークアップされるいわゆる空の要素です。 
終了タグは省略ではなく、もともと存在しません。また、ブロックレベル要素です 
から、 P 要素の中やテキストレベル要素の中に® くことはできません。 


MH2 - 

•ALIGN ( 初期値： center) 


left 

左揃え 

〇 

〇 


center 

中央揃え 

〇 

〇 

〇 

right 

右揃え 

〇 

〇 

- 

〇 


• NOSHADE ( 論理型 ) 



働き 


I2EI 

mm 

noshade 

線を平面的にする 

〇 

〇 

〇 


厲性は省略可 


參 SIZE 


値 

働き 


N 4 

mm 

pixels 

線の太さ (pixel) 

〇 

〇 

〇 


属性は省略可 


誦水平線 
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HTML リファレンス 


•WIDTH ( 初期値： 100%) 



H 3 

N 4 


length 線の長さ 

〇 

〇 

〇 


属性は省略可 


聲落時 p / xe / s=pixel 数 / engf / i=pixel 数または％ 


mmm - 

•ALIGN 属性 

水平線を左右の余白内のどの位置に表示するかを指定します。多くの場合、長 
さを指定する WIDTH 属性とセットで使用します ( WIDTH 诚性の項参照)。 

• NOSHADE 属性 

NOSHADE 属性を指定することによって、 Web ブラゥザに一般的な陰影つき水 
平線ではなく、平面的な水平線を引くよう指示します。 NOSHADE 铖性を指定す 
る場合は、厲性名は省略し属性値 「 noshadeJ のみを記述します ( P .8 参照)。 


<HR> 

く HR noshade> ^- "^ NOSHADE 厲性の指定1 



HR 要索の表示例 



Lynx での表示例 




HR 


影付きだとわかりにくいが、上か 
ら順に無指定の場合 lOpixel の 
場合 20 pixel の場合 

TTI 

SIZE 属性の使用例 

•W 旧 TH 属性 

WIDTH 尿性を指定することによって、 Web ブラウザに水平線を表示する際の長 
さを Web ブラウザのウインドウ幅に対する％単位、または絶対値を pixel 単位で指 
示することができます。また、 ALIGN 属性とセットで用ぃると、水平線の表示位 
赝を指定することもできます C 

なお、 WIDTH 属性を省略した場合、 Web ブラウザ側で適当な厲性値が与えら 
れますが、通常は100%が多ぃようです。ただし、 WIDTH ="100%" を指定しても 
完全にウインドウ幅の100%に表示する Web ブラウザはないようです。 


籲 SIZE 属性 

SIZE 属性を指定することによって、 Web ブラウザに水平線を表示する際の太さ 
を pixel 単位で指示できます。 

また、 SIZE 属性を省略した場合、 Web ブラウザなどアプリケーション側で適当 
な属性値が与えられますが、通常は 2 pixel が多いようです。ただし、 Lynx などテ 
キストブラウザでは太さを表現することはできません。 


B n | 




■ 



水平線 










2 章 HTML リファレンス 


<HR> 

<HR WIDTH="80"> 

く HR WIDTH="80%"> 

<HR WIDTH="40%"> 

<HR ALIGN="left" WIDTH="40%"> 
<HR ALIGN="right" WIDTH=_40V> 


Netscape ： HR ■本 3 ■ : ■ン ■— フー 1 团 



W 旧 TH 厲性の使用例 


9 ^ 














關關 

TABLE <TABLE>^</TABLE> 


TABLE element) ブロックレベル要素 


向 ©► CAPTION TR 


※1 個以上 
■33 ► BODY 

DD LI DIV CENTER 
BLOCKQUOTE FORM TH TD 

- 

TABLE 要素は HTML 文書で表組を行う要素です。開始タグ < TABLE > と終了 
タグ </ TABLE > によって、表を構成する各種の要素をマークアップします。 

表機能の正式サボートは、 HTML 3.2 の大きな特徴の1つです。それまでの 
PRE 要素を使用した見せかけの表とは異なり、文書中のあるデータの固まり 
が「表要素 J としての意味を持つことが可能になった意義は大きいでしょう。 
とはいえ、表を要素として認嫌はできても、画面上でそれらしく表現できな 
い Web ブラウザも存在します。たとえば、 Lynx などテキストブラウザでは表 
のレイアウトは表現できません（壜合によっては、別途 PRE 要素で整形した 
表を用意するといいかもしれません)〇 

一方、表機能を Web ブラウザでの表示レイアウトのために応用することもで 
きます。たとえば、文書全体を表要索とし、その中でレイアウトを行ってい 
る人も多くいます。しかし、 HTML 3.2 の仕様害の中でも触れられています 
が、表機能をレイアウトのために使用すると、テキストブラウザや音声出力 
機能を利用しているユーザに正しく情報が伝わらなくなる恐れがあります。 
また、多くの Web ブラウザでは、表要素は内容が全部受信され終わらないと 
表示が始まりません。「大きな表 J だといつまでたっても画面が空白のままで、 
f 可かエラーでも起こっているのではないか？と心配になってしまいます。く 
れぐれも、表機能のレイアウトへの応用は憒重に行ってください。 


•(行要索丨 


< TABLE > 


<TR><TH> A </TH><TH> B </TH><TH> C </TH><TH> D </THx/TR> 
<TR><TD> 1 </TD><TD> 2</TD><TD> 3</TD><TD> 4</TD></TR> 
<TR><TD> 5 </TD><TD> 6 </TDxTD> 7 </TDxTD> 8 </TDx/TR> 
</TABLE>^ - f 終了タグ 1 





1 章 HTMLU フアレンス 



Netscape TABLE 見本 1 

BB 

ミ：朽 

次 *35 み * i みホ-ム 糗去 ガイ F 

3 n] 


A B C D 

12 3 4 
5 6 7 8 


表の基本構造 


なお、 TABLE 要素はブロックレベル要素ですが、内容としては表題の CAP 
TION 要素を0個以上、表の行要素である TR 要素を1個 （= 1行分）以上跋くこ 
とができます。それ以外の要素を ! g くことはできません。 




•ALIGN ( 初期値： left) 


「値 

働き 

H3 

N4 14 | 

left 

左揃え 

〇 

〇 〇 

center 

中央揃え 

〇 

〇 〇 

right 右揃え 

〇 

〇 1 〇 




* 性は省略可 

•WIDTH 




]m 働き H3 N4 14 R 

length 

表の横福 

〇 

〇 〇 




厲性は省略可 

• BORDER 

(初期値： 0 ) 



■値 

働き 

H3 

N4 14 P 

pixels 

表の外枠幅 

〇 

〇 〇 


属性は省略可 


•CELLSPACING 


値 

働き 

H3 

N4 

14 

pixels 

セルの枠幅 

〇 

〇 

〇 


属性は省略可 
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TABLE 


•CELLPADDING 


値 働き H3 

N4 

14 | 

pixels 

セルと内容との間隔 

〇 

〇 

〇 

•BORDERCOLOR 


属性は省略可 

値 働き 

H3 

N4 


color 

表の枠色 

一 

一 

1 

• BORDERCOLORLIGHT 


厲性は省略可 

値 

働き 

H3 

N4 

14 

color 

表の枠色 

一 

一 

| 

•BORDERCOLORDARK 


厲性は省略可 

| 値 ffi ) き H3 N4 14 1 

color 

表の枠のシャドー色 

一 

一 

! 


厲性は省略可 




co/or= 色指定の 16 進数 (#rrggbb) または色名 
/eno//)=pixel 数または％ 


p/xe/s=pixel 数 


- 

•ALIGN 属性 

表の位 1 揃えを指定します 

ALIGN 属性を省略した場合、 Web ブラウザなどアブリケーシヨン側で left が与 
えられます。 


< TABLE (ALIGN=" right "1^ - [ALIGN 歲性の贏 j 

<TRXTH> A</THXTH> B </THxTH> C </THxTH> D </TH></TR> 
<TR><TD> 1 </TD><TD> 2</TD><TD> 3</TD><TD> 4</TD></TR> 
<TR><TD> 5 </TD><TD> 6 </TD><TD> 7 </TDxTD> 8 </TD></TR> 
</TABLE> 











1 章 HTMLU フアレンス 


3 __ • 


Netscape ： TABLE 見本 2 二 




次 

みホ-ム ガイド 


プリント t キ u 


A B C D 

12 3 4 
5 6 7 8 


r 表が右詰めで表示される i - 1 I 

ALIGN 厲性を right に股定した例 


ALIGN 塚性の使用で注意しなければならないのは、城性値に left や right を設定 
した場合、 Web ブラウザによっては、 TABLE 要素に続く他の要素（テキストなど) 
が余白に回り込んでしまうことです 0 厲性を省略したり、 center を設定した場合 
はその限りではありません0 


< TABLE > 

<TR><TH> A</TH><TH> B </TH><TH> C </TH><TH> D </THx/TR> 
<TR><TD> 1 </TD><TD> 2</TD><TD> 3</TD><TD> 4</TD></TR> 
<TR><TD> 5 </TD><TD> 6 </TD><TD> 7 </TD><TD> 8 </TDx/TR> 
</TABLE> 

<P> 凡そ軍団は一隊毎に強壮ならむ者を定めて、分かちて鼙手に充てよ。均分 
して番に入れよ（まず隊別の薄手を総計し、それを均分して番に入れる)。 </P> 


□ 


: Netscape ： TABLE 見本 3 


P1H 


貢る 


羅费み* A みホ -A 


ガイ I 


プリン I 


面 

~I 


A B C D 

12 3 4 
5 6 7 8 


Web ブラウザによって初期値 left が与えられ、表は 
左寄せして表示される。また、要索の区切 D を表すた 
めに改行と空白行の挿入が行われる 




ALIGN 属性を省略した例 


< TABLE ALIGN="left"> 

(以下略） 


100 












T4SL£ 



Netscape ： TABLE 見本 4 


r ; 朽 

次 み iA みホ•ム ガイド 



A B C D 凡そ軍団は一隊毎に强壮ならむ者を定めて*分かちて弩手に充て 
よ。均分して番に入れよ（ます1玆1|の弩手を終針しそれを均分 
12 3 4して番(こ入れ 5) 0 
5 6 7 8 A 


ALIGN 属性を省略せず left (あるいは right ) を設定 
すると 、 Netscape Navigator や Internet Explorer 
では続く要索が余白に回り込む 
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ALIGN 厲性に left を投定した例 


^myoo 


QE 


林4 ▲ 


A B C D 
12 3 4 
5 6 7 8 


S 漂 I ブ親? t ! 潔お 


テキストブラウサでは回 
り込みは表現されない 


Lynx での表示例 


もし、城性値に right を設定し、かつ表にテキストが回り込まないようにするに 
は、 TABLE 要素で位置揃えを指定せず、 DIV 要素を使用するといいでしょう 
( TABLE 要素では親要素である DIV 要素の属性がそのまま継承される)。 


<DIV ALIGN="right "> ^ - 1 DIV 要素に ALIGN =_ right •を設定] 

< TABLE > 

<TR><TH> A </TH><TH> B </THxTH> C </TH><TH> D </THx/TR> 
<TR><TD> 1 </TD><TD> 2 </TDxTD> 3 </TD><TD> 4 </TDx/TR> 
<TR><TD> 5</TD><TD> 6</TD><TD> 7</TD><TD> 8</TD></TR> 
</TABLE> 

</DIV> 

<P> 凡そ軍団は一隊毎に強壮ならむ者を定めて、分かちて弩手に充てよ。均分 
して番に入れよ（まず隊別の薄手を総計し、それを均分して番に入れる)。 

</P> 




















HTML リファレンス 


□ 

. = Netscape ： TABLE 見本 5 響 

- 国 BB 

j ^ 

* *25 み d みホ- ム Ml ガイ!： 



A B C D 

12 3 4 
5 6 7 8 


凡そ軍団は一毎に強壮ならむ者を定めて、分かちて弩手に充てよ。均分して 
番(こ入れよ（ます降別の弩手を絡計し.それを均分して番に入れる）。 


DIV 要索に ALIGN 厲性を使用することで回り込みを回避できる 


參 WIDTH 属性 

WIDTH 属性を指定することによって、 Web ブラウザに表を表示する際の幅を 
Web ブラウザのウインドウ幅に対する％単位、または絶対値を pixel 単位で指定す 
ることか # できます。 

WIDTH 厲性を省略した場合、 Web ブラウザなどアブリケーシヨン側で適当な厲 
性値が設定されます。また、 Lynx などのテキストブラウザには WIDTH 厲性を表 
現できないものがあります0 


〈TABLE BORDER= "2 "fwiDTH^ - 1 WIDTH 厲 性の指定洛 ' 

<TR><TH> A </TH><TH> B </TH><TH> C </TH><TH> D </THx/TR> 
<TR><TD> 1 </TD><TD> 2 </TD><TD> 3 </TD><TD> 4 </TDx/TR> 
</TABLE> 

<TABLE BORDER^ "2 _ 「WIDTH 鬵 "360"— - -^WIDTH 厲性の指定鍾 

<TRXTH> A </TH><TH> B</TH><TH> C </THxTH> D</THx/TR> 
<TR><TD> 1 </TD><TD> 2 </TD><TD> 3 </TD><TD> 4 </TDx/TR> 
</TABLE> 
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なお、 WIDTH 属性はできるだけ絶対値で指定しないことをおすすめします。な 
ぜなら、表の幅が固定されると、画面の狭い端末（コンピュータとは限りません） 
を使用しているユーザは、ウインドウに表が収まらず、表を見渡すために横スクロ 
ールを強いられるからです （ Apple 社の Cyberdog のように強引に変形して収める 
ものもありますが、それは少数派です)〇 


• BORDER 属性 

表の外枠の幅を pixel 単位で指定します 0 

BORDER 属性を省略した場合、 Web ブラウザなどアブリケーシヨン側で適当な 
値が設定されます。一般的には BORDER ="0" か 15：定されることが多く、その場合 
は外枠は表示されません 0 また、 Lynx などのテキストブラウザには枠が表現でき 
ないものがあり、その場合は BORDERW 性も表現できません0 


く TABLE 「 BORDER:" 20 w > ^- f~B 〇 RDER 鹿性の指定 1 

<TR><TH> A </TH><TH> B </TH><TH> C </THxTH> D </THx/TR> 
<TR><TD> 1 </TD><TD> 2</TD><TD> 3</TD><TD> 4 </TD></TR> 
<TR><TD> 5 </TD><TD> 6 </TD><TD> 7 </TD><TD> 8 </TDx/TR> 
</TABLE> 


表 
















2 章 HTML リファレンス 


•CELLSPACING 属性 

表の枠の幅を pixel 単位で指定します 0 

CELLSPACING 属性を省略した場合、 Web ブラウザなどアブリケー シヨ ン側で 
適当な値が設定されます。一般的には CELLSPACING="2" が 15 ： 定されることが多 
いようですが、 BORDER="0" の場合は、それに合わせて CELLSPACING="0" に 
なります。また、 Lynx などのテキストブラウザには枠が表現できないものがあり、 
その場合は CELLSPACING 属性も表現できません0 

厂 CELLSPACING 属性の指定 L 

< TABLE BORDER= "2" 「 CELLSPACING= " 20 n ]>M - > 

<TR><TH>A</TH><TH>B</TH><TH>C</TH><TH>D</THx/TR> 

<TR><TD>l</TDxTD>2</TD><TD>3</TD><TD>4</TD></TR> 

<TR><TD>5</TD><TD>6</TD><TD>7</TD><TD>8</TDx/TR> 


□ Netscape TABLE 髡 本 8 B B 

? j | K 驀 次 ホ -A Ml IHf プリント t!4|Q| 

[A B C D 

[T f2" fT f4" 

5 \s t [ r -^- 

- 1 描が 20pixel になる 1 




CELLSPACING 厲性の使用例 


•CELLPADDING 属性 

表の枠と各セル内のデータとの間隔を pixel 単位で指定します。 
CELLPADDING 域性を省略した場合、 Web ブラウザなどアブリケーシヨン側 
で適当な値が与えられます。また、 Lynx などのテキストブラウザには枠が表現で 
きないものがあり、その場合は CELLPADDING 厲性も表現できません0 


1〇4 
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篇❻ ■■■■III 1 CELLPADDING 属性の指定 I 

く TABLE B0RDER="2" [CELLPADDING= "20 - 

<TR><TH>A</THxTH>B</TH><TH>C</TH><TH>D</TH></TR> 

<TR><TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TDX/TR> 

<TR><TD>5</TD><TD>6</TD><TD>7</TD><TD>8</TDX/TR> 

</TABLE> 


: Netscape ： TABLE 見本 3 


00 


民る 


: r- ¢25 みみホ-ム 


ガイ！： Sit プリント 


t ! キ 13 


A 

B 

C 

D 

1 

2 

3 

4 

5 

6 

7 

8 J 


-I 幅が 20pixel になる I 

CELLPADDING 厲性の使用例 


• BORDERCOLOR 属性 

表の枠色を指定します。色は16進数、あるいは色名で指定します。 

Internet Explorer の独自拡張なので、一般の HTML 文拽では使用しない方が 
いいでしよう。 

• BORDERCOLORLIGHT 属性 

表の枠のハイライト色を指定します。色は16進数、あるいは色名で指定します。 
Internet Explorer の独自拡張なので、一般の HTML 文害では使用しない方が 
いいでしよう。 

參 BORDERCOLORDARK 属性 

表の枠のシャドー色を指定します。色は16進数、あるいは色名で指定します。 
Internet Explorer の独自拡張なので、一般の HTML 文書では使用しない方がい 
いでしよう。 








關關 

CAPTION <CAPTION>~</CAPTION> 


表 (table or figure CAPTION) ブロックレベル要素 


阅 ©► TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
IMG APPLET FONT BASEFONT BR MAP INPUT 
SELECT TEXTAREA SCRIPT 
一般的なテキスト 
※〇個以上 
TABLE 




CAPTION 要素は、表題のための要素です。 


開始タグ < CAPT 10 N > と終了タグく/ CAPTION > によって、表題をマークアッ 
ブします0内容としてはテキストレベル要素と一般的なテキストのみ置くことがで 
きます。 


CAPTION 要素は必須要素ではありませんが、使用する場合は TABLE 要素の中 
の一番 fii •初に1つだけ敗かれます0他の要素の中に CAPTION 要素を K くこと、 
あるいは1つの TABLE 要素の中に複数の CAPTION 要素を既くことはできません0 


<TABLE BORDER 二 " 2" > 1 CAPT IO N 

1 く CAPTION> 表： 民 部省とその被 官の職 貝と数 </CAPTI0l^ 4 ~ 1 — 

く TR><T 日 > 民部省く / TH><TH> 主計寮く / TH><TH> 主税寮 </TH></TR> 
<TR><TD> 卿一人 </TD><TD> 頭一人 </TD><TD> 頭一人 </TD></TR> 
<TR><TD>*_ — 人 • 少輔一人 </TD><TD> 助一人 </TD><TD> 助一人 
</TD></TR> 

く TR><TD> 大丞一人 • 少丞二人 </TD><TD> 大充一人 • 少充二人 </TD><TD> 
大充一人 • 少充二人 </TD></TR> 

く TR><TD> 大録一人 • 少録三人く / TD><TD> 大属一人 • 少属一人 </TD><TD> 
大属一人 • 少属一人く / TD></TR> 

<TR><TD>$ 生十人 </TD><TD>|| 師二人 </TD><TD> 算師二人 
</TD></TR> 

<TR><TD> 省掌二人 </TD><TD>* 生 六 人 </TD><TD>* 生四人 
</TD></TR> 

<TR> <TD> 使部六十人 </TD><TD> 使部廿人 </TD><TD> 使部廿人 
</TDx/TR> 

<TR><TD> 直丁四人 </TD><TD> 直丁二人 </TD><TD> 直丁二人 


1〇6 




CAPTION 


</TDx/TR> 
</TABLE> 



CAPTION 要索の使用例 






















2 章 HTMLU フアレンス 


CAPTION 要素が表の前（上）にあれば、 Lynx など表の形を完全に再現で 
きない Web ブラウザでも、以下に続くテキストが「表データ J であることが 
画面上でも確認できますし、音声出力機能ではなおさらです。 CAPTION 要 
素を必ず TR 要素の前に置く理由、あるいは Lynx で ALIGN 属性が表現され 
ない（後述）理由は、その辺りにもあるのでしょう。 

なお、 CAPTION 要素は必須の要素ではありませんし、本害のサンプルソー 
スでも煩雑さを避けるため省略しています。しかし、上記のような理由から、 
本物の HTML 文害ではできるだけ記述しましょう。また、その際に表題の先 
頭に「表」などの一言を入れておくと、表があることがよりはっきりするで 
しよラ〇 


MH1 - 



top 

表の上部に表示 



bottom 

表の下部に表示 

〇 

〇 〇 

left 

表の左側に揃える 

- 


center 

表の中央に揃える 

一 


right 

表の右側に揃える 

一 



厲性は省略可 


•VALIGN 

「値 

働き 

H 3 

N 4 

14 

top 

表の上部に表示 

一 

一 

! 

bottom 

表の下部に表示 

一 

一 

! 


厲性は省略可 


卜萍 fl - 

參 ALIGN 属性 

一般的な文害では、表題は表の上部に配置されますが、 ALIGN 属性を指定して、 
下部に指定することもできます。ただし、 Lynx などテキストブラウザでは、 
ALIGN 属性は無視され、必ず表の上部に表示されます（おそらく表の認識性を高 
めるためでしよう）。 


108 






CAPTION 


X - (ALIGN 属性の指定 1 

< TABLE BORDER= » 2■> _J 

<CAPTION 「 ALIGN= "bottom” 卜 表:民部省とその被官の職員と数 
</CAPTION> 

く TR><TH> 民部省く/ TH><TH> 主計寮 </TH><TH> 主税寮く/ TH></TR> 
<TR><TD> 卿一人 </TD><TD> 頭一人 </TD><TD> 頭一人 </TD></TR> 
<TR><TD> 大輔一人 • 少輔一人 </TD><TD> 助一人 </TD><TD> 助一人 
</TD></TR> 

(中略） 

く TR><TD> 直丁四人く/ TD><TD> 直丁二人く/ TD><TD> 直丁二人 
</TDx/TR> 

く/ TABLE > 



ALIGN ) ■性の使用例 


なお、属性値のうち、 left 、 center 、 right は Internet Explorer の独自拡張 
です。これらは VALIGN 域性と組み合わせて使用されます。 


參 VALIGN 属性 

ALIGN 属性の属性値のうち、 left 、 center 、 right と組み合わせて、表題の位 
置を揃えるために使用されます 0 しかし 、 Internet Explorer の独自拡張なので、 
一般の HTML 文書では使用しない方がいいでしょう。 
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8 R <TR>-</TR> 


表の行要素 (Table Row) ブロックレベル要素 


向 ©► TH TD 

table 

- 

TR 要素は表の行要素です。開始夕 ^< TR > と終了夕/ </ TR > によって表の行要 
素をマークアップします。終了タグは省略可能ですが、 HTML 文#が煩雑にならな 
けれは!^しておレ、た方がレ、いでしょう。 

表の基本構成要素ですから、必ず TABLE 要素の中に置かれます（他の要素の中 
に TR 要素を骰くことはできません)〇内容としては表の見出しセルである TH 要素 
( P . 112参照）とデータセルである TD 要素 （ P .122 参照）のみを时くことができます0 
また、同じ行に TH 要素と TD 要素の両方を骰くこともできます。 


< TABLE B0RDER="2"> 

く CAPTION> 民部省とその被官の職員と数 </CAPTION> 

く TR><TH> 民部省 </TH><TH> 主計寮く / TH><TH> 主税寮 </TH></TR> 
<TR><TD> 卿一人 </TD><TD> 頭一人 </TD><TD> 頭一人 < /TD> < /TR> 
<TR><TD> 大輔一人 • 少輔一人 </TD><TD> 助一人 </TD><TD> 助一人 
</TD></TR> 

( 中略） 

<TR><TD> 直丁四人 </TD><TD> 直丁二人 </TD><TD> 直丁二人 
</TD></TR> 

</ TABLE > 




•ALIGN 


1値 

働き 

H 3 

N 4 

14 B 

left 

セルの左側に揃える 

〇 

〇 

〇 

center 

セルの中央に揃える 

〇 

〇 

〇 

right 

セルの右側に揃える 

〇 

〇 

〇 


属性は省略可 
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TR 


參 VALIGN 

「値 

働き 

H 3 

N 4 

14 

top 

セルの上部に揃える 

〇 

〇 

〇 

middle 

セルの中央に揃える 

〇 

〇 

〇 

bottom 

セルの下部に揃える 

〇 

〇 

〇 

baseline 

テキストのベースラインに揃える 

一 

! 

! 


属性は省略可 


mmm - 

•ALIGN 属性 

セル内の見出しやデータの左右方向の位®揃えを指定します0表の幅を特定の幅 
に設定している場合や ( TABLE 要素の WIDTH 要素)、セル内のデータの長さが異 
なる場合などに使用します。 

属性値には left 、 center 、 right の3穐類があります。属性を省略した場合は、 
表の見出し （ TH 要素）は center 、 セル内のデータは left が適用されます 0 


-1 ALIGN 厲性の指定1;二 

< TABLE WIDTH*" 80%"> - 

- ►f<TR ALIGNS" left ">>TH>A</THXTH>B</THXTH>C</TH></TR> 
■► ド TR ALIGN=" left ">)<TD>1</TD><TD>2</TD><TD>3</TD></TR> 

- ►[<TR ALIGN* "center ">JcTD>4</TD><TD>5</TD><TD>6</TDx/TR> 
— ►^TR ALIGN= "right ">]<TD>7x</TD><TD>8</TD><TD>9</TDx/TR> 
</TABLE> 


表 


□ 


:二 Netscape： TR 見本1【 

== 



次 

み iA みホ-ム 幘* ガイド 

S 價 



A 

B 

C 

1 

2 

3 

4 

5 

6 

7 

8 

9 


ALIGN 厲性の使用例 


III 








2 章 HTMLU フアレンス 


•VALIGN 属性 

セル内の見出しやデータの上下方向の位置揃えを指定します0セルの高さが中の 
データより高い場合などに使用します。 

属性値には top、middle、bottom、baseline の4種類があります。属性を省 
略した場合は、通常、 middle が適用されます。また、 Lynx などテキストブラウザ 
では VALIGN 域性は表現できません。 

なお、诚性値のうち baseline は Netscape Navigator と Internet Explorer の 
独自拡張なので、一般の HTML 文寄では使用しない方がいいでしょう。 



< TABLE B0RDER=2 WIDTH*” 80%"> 

XTR VALIGN:"top"V く TD><IMG SRC«_tell.srif _></TD><TD> 上 
部揃えく/ TD></TR> 

♦ <TR VALIGN»"middle"><TD><IMG SRC= "tell.gif "</TD><TD> 

中央捕えく/ TD></TR> 

-► <TR VALIGNg"bottom"V <TD><IMG 

SRC=" tell, gif _></TD><TD> 下部揃えく/ TD></TR> 

令 <TRj VALIGN= "baseline"(><TD><IMG 

SRC="tell.gif，></TD><TD> ベースライン描え </TD></TR> 

</TABLE> 

※見やすくするために IMG 要索の WIDTH • HEIGT • A じ T 属性を省略 


l»J _ ■■■. — -■ ■二 

^^ Nelscaoe ： TR 1^2 

_ - *. *■}Pi H I 

r：i 民る 次 み 4 みホ-ム m ガイド ffitu プリント| 

r - - 


0 

上部描え 


0 

中央描え 


E 

下部*え 


(2 

ペースライン 描え 


れ 



VALIGN 属性の使用例 
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表の見出し要素 (Table Header cell) 


ブロックレベル要素 


向 ©► HI H2 H3 H4 H5 H6 
ADDRESS 

P UL OL DL (DIR) (MENU) PRE DIV CENTER 
BLOCKQUOTE FORM ISINDEX HR TABLE 
TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE 
INPUT SELECT TEXTAREA A IMG APPLET FONT 
BASEFONT BR MAP SCRIPT 
一般的なテキスト 

6113 ► TR 


要素 s 概要 


TH 要素は表の見出し要尜です。開始タグ < TH > と終了タグ</丁11> によって、 
表の見出し要素をマークアップします。終了タグは省略町能ですが、 HTML 文搭 
利貝雑にならなけれ1观しておレゾこ方がレ、いでしょう。 

Web ブラウザでは、見出しのテキストはボールド表示され、データと区別されま 
す。また、セルの幅は同じ TABLE 要素内の最大のセルに自動的に調整されます0 
あるいは、表の幅か 定の値に設定されている場合は （ TABLE 要素の WIDTH 城 
性)、自動的にセル内でテキストが折り返しされます 0 —方、 Lynx などテキストブ 
ラウザにはこれらの表示 • 調整機能がないものもあり、その場合は見かけ上表の形 
は崩れて表示されます0とはいっても、セルの区切りは空白文字などに置換されて 
表現されるため、データを保存して別のアブリケーシヨンで加工表示することはで 
きます。 

表の行を構成する要素ですから、必ず TR 要素の中に置かなければなりません 
(他の要素の中に TH 要素を置くことはできません)〇内容としてはテキストレベル 
要素や一般的なテキストだけでなく、ブロックレベル要素も置くことができます0 
あまり使用する機会はないと思いますが、表の入れ子も可能です。 


2 章 HTML リファレンス 


< TABLE BORDER="2" WIDTH="45%"> 

<TR><TH> 主計寮の職務内容 </TH><TH> 主税寮の職務内容く / TH></TR> 
<TR><TD>1</TD><TD>2</TD</TR> 

</ TABLE > 



一 = ..,1 j | | 



■ 

JJ N ] 

主社察の囔菝 
内容 

1 

主税察の C 務 
内容 

2 


見出しはボールド表示される。また、 
表の梅に制限がある場合は、セル内で 
は自動的に行の折り返しが行われる 


TH 要索の表示例 


MH1 


• NOWRAP 



属性は省略可 


• ROWSPAN ( 初期値： 1) 


|値 働き H 3 N 4 14 

number 

セルの高さを行数で指定 

〇 

〇 

〇 


属性は省略可。0より大きい数値 


•CPLSPAN ( 初期値： 1 ) 


値 働き 

N 4 

14 | 

number 

セルの幅を列数で指定 

〇 

〇 

〇 


厲性は省略可。0よ0大きい数値 
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値 働き 

left 

セルの左側に揃える 

center 

セルの中央に揃える 

right 

セルの右側に揃える 


〇 〇 

〇 〇 

属性は省略可 


IVALIGN 



厲性は省略可 


►WIDTH 



pixels 


表の高さ 


〇 〇 
属性は省略可 


•BGCOLOR 


値 


N 4 


14 


color 


セルの背景色を指定 （16 進数、色名） 


co/or= 色指定の16進数 (# rrggbb ) または色名 
number = 0 より大きい数値 


厲性は省略可 

p »' xe / s=pixel 


属性解‘説 


• NOWRAP 属性 

Web ブラウザでは、表の表示幅をウインドウの幅に合わせて自動調整します〇ま 
た、それに合わせてセル内のデータも自動的に折り返されます。しかし、 
NOWRAP 属性を指定することによって、セル内の自動折り返しを禁止できます。 
ただし、テキストブラウザでは NOWRAP 属性を表現できないものもあります。 
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2 章 HTMLU フアレンス 

NOWRAP 属性を指定する場合は、属性名は省略し属性値 「 nowrap 」 のみを記 
述します ( P .8 参照)。 


< TABLE BORDER=" 2 M WIDTH="45%"> 


<TR><TH > 主計寮の職務内容 < /TH> <TH> 主税寮の職務内容 </THx/TR> 

<TRXTD> 1 </TD><TD> 2 </TD</TR> 

</TABLE> 


<TABLE BORDERS"2" WIDTH=-45%"> 

<TR><TH 【 nowrap 卜主計寮の職務内容く / TH><TH > 主税寮の職務内容 

</TH></TR> ^- ( NOWRAP 

厲性の指定 1 

<TR><TD> 1 </TD><TD> 2 </TD</TR> 
</TABLE> 



□二:' 


Netscape ： TH 見本2 

0 B 


次 fia 

S みみホ-ム 憒条 ガイ!： 

is プリントセキ Uj | 


主 ^ 18 主税黯肺 




NOWRAP 厲性の使用例 


• ROWSPAN 属性 

表内の一部で複数行にまたがるセルを作成する場合に使用する诚性です0 
属性値には行数 （0 より大きい整数）を指定します0また、表全体の行数を超え 
る数値を指定することはできません。厲性を省略した場合は、自動的に値1が与え 
られます。 

なお、 Lynx などテキストブラウザには ROWSPAN 属性を表現できないものもあ 
ります。また、音声出力では表のイメージが得られにくくなるため、使用に当たつ 
ては注意が必要です。 


n6 








TH 


<TABLE BORDER = » 2" WIDTH ="6 0% "> 

く TR > <TH fROWSPAN = " 3 " 卜 主計寮の職務内容く/ TH > < TD > 調及ひ潍物 
を計り納れるく/ TD ></ TR > ^ ~-"〜~ f_ROWSPAN 厲 性の指定 ] 

く TR >< TD > 国用を支度る </ TD ></ TR > 

く TR >< TD > 用度を勘勾するく/ TD ></ TR > 

</ TABLE > 



表 

•COLSPAN 属性 

表内の一部で複数列にまたがるセルを作成する場合に使用する域性です。 

属性値には列数 （0 より大きい数値）を指定します。また、表全体の列数を超え 
る数値を指定することはできません。诚性を省略した場合は、自動的に値1が設定 
されます。 

なお、 Lynx などテキストブラウザには COLSPAN 属性を表現できないものもあ 
ります0また、音声出力では表のイメージ洲导られにくくなるため、使用に当たつ 
ては注意力^2、要です。 

< TABLE BORDER ="2" WIDTH ="60%"> 

< TR><TH ( COLSPAN = ■ 3 ”卜主計寮の職務内容 < / TH ></ TR > 

< TR >< TD > 調及び]^物を計り納れる </ TD >< TD > 国用を支度る </ TD >< TD > 

用度を勘勾する </$ D ></ TR > 

</ TABLE > 1 - COLSPAN ® 性の指定 ■ 
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HTML リファレンス 


Wk ^ : : :^ -- フ : 「 - w ' - 一 _il^ 

圓丨 KSS3KS3iK3BSEHEriE3SB3 N 

Jtt^L 


COLSPAN 属性を設定し 
たセルは、設定した行数分 
にまたがる 


COLSPAN 厲性の使用例 


•ALIGN 属性 

セル内の見出しの左右方向の位 ( R 揃えを指定します。表の幅を特定の幅に設定 
している場合や （ TABLE 要素の WIDTH 要素）、セル内のデータの長さが異なる場 
合などに使用します。 

属性値には left 、 center , right の3種類があります 0 属性を省略した場合は、 
center が適用されます c また、 Lynx などテキストブラウザでは WIDTH 诚性を表 
現できないものもあり、その場合は ALIGN 域性も表現できません0 


< TABLE BORDER= "2 W WIDTH=”80V> _ 

く TR><TH 「 ALIGN= "left"kA_</TH><TH 「 ALIGN=” 
THXTH [ALIGN 
<TR><TD> 1 </TD><TD> 2 </TDxTD> 3 </TDx/TR> 
<TR><TD> 4</TD><TD> 5</TD><TD> 6</TD></TR> 
<TR><TD> 7 </TD><TD> 8 </TD><TD> 9 </TDx/TR> 
</TABLE> 


ALIGN 厲性の指定 1 


ii8 
















TH 







El 朽 

次 

み d みホ-ム ガイド 

_- II 9 N 


A B 

C 

1 2 

3 

4 5 

6 

7 8 

9 


ALIGN 属性の使用例 


•VALIGN 属性 

セル内の見出しの上下方向の位置揃えを指定します0セルの高さが中のデータよ 
り高い、たとえば、同じ行に IMG 要素が置かれていたり、 HEIGHT 属性が設定さ 
れている場合などに使用します（サンブルソースと表示結果は HEIGHT 厲性の項を 
参照)。 

城性値には top 、 middle 、 bottom 、 baseline の4種類があります。械性を省 
略した場合は、通常、 middle が適用されます。また、 Lynx などテキストブラウザ 
では VALIGN 属性は表現できません。 

なお、城性値のうち baseline は Netscape Navigator と Internet Explorer の 
独自拡張なので、一般の HTML 文杏では使用しない方か〜、いでしょう。 

•WmTH 属性 

セルの幅を pixel 単位で指定します 0 

また、 Lynx などテキストブラウザには WIDTH 诚性を表現できないものもありま 
す。 


< TABLE BORDER=" 2 " > _ 

<TR><TH [WIDTHS "40 "|>^/JH><TH 「 WIDTH* 11 804 B </THxTH 
[WIDTH= "20"t ^： <r^^fwiDTH 厲性の指定 j 
<TR><TD> 1 </TD><TD> 2</TD><TD> 3</TD></TR> 

</TABLE> 












2 章 HTMLU フアレンス 





iUL 




1K9 

m 




5Jn 


A 

B 

C 

1 

2 

3 

40 

80 

20 

pixel 

pixel 

pixe 


W 旧 TH 厲性の使用例 


• HEIGHT 属性 

セルの商さを pixel 単位で指定します 0 また、セル内の見出しの上下方向の位置 
揃えをしたい場合は、 VALIGN 屈性を併用します。 

なお、理屈上同じ行で違う商さを指定することはできません 0 また、 Lynx など 
テキストブラウザには、 HEIGHT 城性を表現できないものもあります。 


<TABLE B0RDER="2" WIDTH*"80V > 

<TRXTH HEIGHT=_40" VALIQN*"top">A</TH><TH 
HEIGHT="40" VALIGN="middle">B</TH><TH HEIGHT="40" 
VALIGN= "bottom" >C</THx/TR> 
<TR><TD>l</TD><TD>2</TD><TD>3</TDx/TR> 

</TABLE> 
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• BGCOLOR 属性 

セルごとの背景色を指定します0色は16進数、あるいは色名で指定します0 
Netscape Navigator と Internet Explorer の独自拡張なので、一般の HTML 
文書では使用しなレ、方が V 、いでしょう0 


表の内容によっては、見出しの中身がないセルを含む場合もあります0その 
場合、一般的な Web ブラウザではセルの枠が表示されません。なお、音声 
出力では表のイメージが得られにくくなるため、使用にあたっては注意が必、 
要です。 


< TABLE B0RDER="2"> 

<TR><TH WIDTH= "40"X/THXTH WIDTH="40">B</TH><TH 

WIDTH="40">C</THX/TR> 

<TR><TD>l</TD><TD>2</TD><TD>3</TDx/TR> 

</TABLE> 


□ 

… . ■- 一 

- Netscape ： TH H^8 - 

0B 

司：'… 

次 

■— 賊祕於身が 7 し、セル^- 

J N 



B C 

1 

2 

3 


データがない場合の表示例 














阅 ©► HI H2 H3 H4 H5 H6 
ADDRESS 

P UL 〇 L DL (DIR) (MENU) PRE DIV CENTER 
BLOCKQUOTE FORM ISINDEX HR TABLE 
TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE 
INPUT SELECT TEXTAREA A IMG APPLET FONT 
BASEF 〇 NT BR MAP SCRIPT 
一般的なテキスト 
6133 TR 


要素®概要 


TD 要素は表のデータ要素です。開始タグ<丁0> と終了タグ</丁0> によって表 
のデータ要素をマークアップします0終了タグは省略可能ですが、 HTML 文掸が煩 
雑にならなけれ1お楚しておいた方か〜、いでしょう。 

Web ブラウザでは、セルの幅は同じ TABLE 要素内の®:大のセルに自動的に調粧 
されます0あるいは、表の幅か游定の値に設定されている場合は （ TABLE 要素の 
WIDTH 尿性)、自動的にセル内でテキストが折り返されます 0 —方、 Lynx などテ 
キストブラウザにはこれらの表示 • 調整機能がないものもあり、その場合は見かけ 
上表の形は崩れて表示されます0とはいっても、セルの区切りは空白文字などに置 
換されて表現されるため、データを保存して別のアブリケーシヨンで加工 • 表現す 
ることはできます。 

表の行を構成する要素ですから、必ず TR 要素の中に置かれます（他の要素の中 
に TD 要素を置くことはできません)〇内容としてはテキストレベル要素や一般的な 
テキストだけでなく、 ブロック レベル要素も置くことができます（あまり使用する機 
会はないと思いますが、表の入れ子も可能です)〇 
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<TABLE BORDER="2" WIDTH="50%"> . 

<TR><TH>A</TH><TH>B</TH><TH>C</THX/TR> 

く TR><TD> 調及び維物を計り納れる </TD><TD> 国用を支度するく / TD> 
<TD> 用度を勘勾する </TD></TR> 

</ TABLE > 



TD 要索の使用例 


«=a- 

• NOWRAP 



ffi ) き 


セル内での折り返し狭止 



厲性は省略可 


IROWSPAN ( 初期値： 1 ) 


値 


働き 


H3 


N4 


14 


number セルの高さを行数で指定 


〇 〇 〇 

厲性は省略可。0より大きい数値 


► COLSPAN ( 初期値： 1 ) 


値 


働き 


number セルの幅を列数で指定 



属性は省略可。0より大きい数値 


12 3 
















2 章 HTMLII フアレンス 


•ALIGN 


■値 

働き 

H 3 

N 4 

14 

left 

セルの左側に揃える 

〇 

〇 

〇 

center 

セルの中央に揃える 

〇 

〇 

〇 

right 

セルの右側に揃える 

〇 

〇 

〇 


属性は省略可 


•VALIGN 


値 

働き 

H3 

N4 

14 

top 

セルの上部に揃える 

〇 

〇 

〇 

middle 

セルの中央に揃える 

〇 

〇 

〇 

bottom 

セルの下部に揃える 

〇 

〇 

〇 

baseline 

テキストのベースラインに揃える 

- 

! 

! 


属性は省略可 


•WIDTH 


|値 

働き 

H3 

N4 

14 ^ 

pixels 

セルの幅 

〇 

〇 

〇 


厲性は省略可 


• HEIGHT 


値 

働き 

H3 

N4 

14 

pixels 

|表の离さ 

〇 

〇 

〇 


属性は省略可 


•BGCOLOR 


値 

働き 

H3 

N4 

14 

color 

セルの背景色を指定 

一 

! 

1 


属性は省略可 

co/or= 色指定の16進数 （#rrggbb) または色名 
p/xe/s=pixel 55 mm)ber=0 より数値 


- 

• NOWRAP 属性 

Web ブラウザでは、表の表示幅をウインドウの幅に合わせて自動調整します。ま 
た、それに合わせてセル内のデータも自動的に折り返されます0しかし、 NOWRAP 
属性を指定することによって、セル内の自動折り返しを禁止できます 0 また、 Lynx 
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などテキストブラウザには NOWRAP 属性を表現できないものもあります。 

NOWRAP 属性を指定する場合は、属性名は省略し属性値 「 nowrap 」 のみを記 
述します ( P .8 参照)。 


< TABLE BORDER= "2" WIDTH 二 " 60V> 

<TR><TH> A</TH><TH> B </TH><TH> C </THx/TR> 

<TRXTD> 調及び雑物を計り納れる < /TD><TD > 国用を支度する 
</TD><TD> 用度を勘勾するく / TD></TR> 

</ TABLE > 

<TABLE BORDER= "2" WIDTH="60V> 

<TRXTH> A</TH><TH> B </THxTH> C </THx/TR> 

<TR><TD [nowrap)> 調及び雑物を計り納れる < /TD><TD > 国用を支度する 
</TD><TD> 用 ！^ を勘勾する </TD></TR> 

</ TABLE > I - fi^WRAP 拽性を指定 j 


Cj == ll ^ = l = ^ ■ _ ~ Netscape： TD 見本 2 0 B 

r：| 次 ホ -A _ Ml _ ガイ P — M — プリント 


A 

調及び雜物を計 
卜5内れる 

B C 

国用を支度用度を助匂す 
する る 

A 

B C 



NOWRAP 厲 性を投定したセル内では 
行の折り返しが禁止される 


NOWRAP 厲性の使用例 


• ROWSPAN 属性 

表内の一部で複数行にまたがるセルを作成する場合に使用する属性です0 
属性値には行数 （0 より大きい数値）を指定します。また、表全体の行数を超え 
る数値を指定することはできません。属性を省略した場合は、自動的に値1が与え 
られます。 

なお、 Lynx などテキストブラウザには ROWSPAN 属性を表現できないものもあ 
りますし、音声出力では表のイメージか 1 辱られにくくなるため、使用に当たっては 
注意が必要です。 



















2 章 HTMLU フアレンス 


<TABLE BORDER*-2' 
<TR><TH> 被官 


WIDTH="60%"> 
</TH><TH > 職務内容 


</TH></TR> 


<TRxTD 


[ROWSP; 

> 


るく / TD></TR> A 

<TR><TD> 国用を支度るく / す D></TR> 

く TR><TD > 用度を勘勾するく ^TD></TR> 
く / TABLE > 


主計寮く / TD><TD > 調及び維物を計り納れ 


[ ROWSPAN の属性を指定 


□ . ■ - - — ■ - Netscape ： TD 本 3 ■ -■■- • 0 fe 

i ：] mi ズ みホ-ム 裱金 ガイド プリント 



e 務内容 


JD 及び划物を計リ納れる 

主計费 

11 用を支度る 


闲度を助勾する 


fROWSPAN 厲性を設定したセル1 
1は、設定した行数分 にまた がる I 

ROWSPAN 厲性の使用例 


•COLSPAN 属性 

表内の一部で、複数列にまたがるセルを作成する場合に使用する诚性です。 

厲性値には列数 （0 より大きい数値）を指定します。また、表全体の列数を超え 
る数値を指定することはできません。城性を省略した場合は、自動的に値1が与え 
られます。 

なお、 Lynx などテキストブラウザには COLSPAN 属性を表現できないものもあ 
ります。また、音声出力では表のイメージが得られにくくなるため、使用に当たつ 
ては注意が必要です。 
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TD 


<TABLE BORDER= "2" WIDTH= w 50^»> ^ ^ 〇 SPANMii の fe 疋 j 

<TR><TH> 長官 </TH><TD (COLSPAN= ■ 2") >»--A</TD></TR> 
<TR><TH> 次官 </TH><TD>*_ — 人 </TD><TDwJ 、_ 一人 </TD></TR> 
<TR><TH> 判官 </TH><TD> 大丞一人 </TD><TD> 少丞二人 </TD></TR> 
<TR><TH> 主典く / TH><TD> 大録一人 </TD><TD> 少録三人 </TD></TR> 
</ TABLE > 


□ Netscape ： Tn ■太 

R る 晨麟み込みホ-ム M ガイ！ 1 プリント1:4^ 



COLSPAN 厲性の使用例 



表 


•ALIGN 属性 

セル内のデータの左右方向の位®揃えを指定します。表の幅を特定の幅に設定 
している場合や ( TABLE 要素の WIDTH 要素）、セル内のデータの長さが異なる場 
合などに使用します。 

诚性値には left 、 center 、 right の3種類があります。域性を将略した場合は、 
Web ブラウザでは center が適用されます 0 また、 Lynx などテキストブラウザでは 
WIDTH 属性を表現できないものもあり、その場合は ALIGN ® 性も表現できませ 

ん〇 


< TABLE BORDER*"2" WIDTH="60%"> 

<TR><TH>A </THXTH>B_ </TH><TH>C 

く / TH> </TR> ALIGN 性の設定 

<TR> <TD 1ALIGN= _ lef t ■ ► 1 </TD> <TD fALIGN^ 11 center ">2 

</TD> <TdTaLIGN»" right ■> 3</TDx/TR> 

</TABLE> t^UGN 属性の設定 ). 
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HTML II フアレンス 



ALIGN 厲性の使用例 


參 VALIGN 属性 

セル内の見出しの上下方向の位置揃えを指定します0セルの高さが中のデータよ 
り高い、たとえば、同じ行に IMG 要素が置かれていたり、 HEIGHT ® 性か激定さ 
れている場合などに使用します（サンプルソースと表示結果は HEIGHT 属性の項を 
参照)。 

属性値には top 、 middle 、 bottom 、 baseline の4種類があります 0 属性を省 
略した場合は、 Web ブラウザでは、 middle が適用されます。また、 Lynx などテ 
キストブラウザでは VALIGN 诚性は表現できません。 

なお、诚性値のうち baseline は Netscape Navigator と Internet Explorer の 
独自拡張なので、一般の HTML 文迸では使用しない方がいいでしょう0 

•WIDTH 属性 

セ ルの 幅を pixel 単位 で 指定します 0 

また、 Lynx などテキストブラウザには WIDTH 铋性を表現できないものもありま 
す。 

< TABLE BORDER="2"> 

<TR><TH> A</TH><TH> B</TH><TH> C</TH></TR> 

2</TD><TD 
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WIDTH 厲性の使用例 

參 HEIGHT 属性 

セルの高さを pixel 単位で指定します 0 また、セル内の見出しの上下方向の位置 
揃えをしたい垛合は、 VALIGN 属性を併用します。 

なお、理屈上同じ行で違う商さを指定することはできません 0 また、 Lynx など 
テキストブラウザには HEIGHT 铖性を表現できないものもあります。 


表 



<TABLE B0RDER="2" WIDTH=" 80%"> 

<TR><TH> A </TH><TH> B </TH><TH> C </THx/TR> 
<TR><TD (HEIGHT= "40"|VALIGN«"top"> 1 </TDxTD(l 
VALIGN= "middle"> 2 <f^P><TD 1 HEIGHT*■ 40 "1 VAL 
tom"> 3 </TDx/TR> A / 

く / TABLE > f 





















1 章 HTMLU フアレンス 


• BGCOLOR 属性 

セルごとの背景色を指定します。色は16進数、あるいは色名で指定します。 
Netscape Navigator と Internet Explorer の独自拡張なので、一般の HTML 
文書では使用しない方がいいでしょう。 


表の内容によっては、データがないセルを含む場合もあります。その場合、 
Web ブラウザではセルの枠が表示されません 0 なお、音声出力では表のイメ 
ージが得られにくくなるため、使用にあたっては注意が必要です。 


< TABLE BORDER^" 2 " > 

<TR><TH>A</TH><TH>B</TH><TH>C</THx/TR> 

<TRXTD WIDTH= "40"> 1</TD><TD WIDTH*"40">2</TD><TD 
WIDTH*"40"></TD></TR> 

</TABLE> 


□ —— - -■ :- ■■■ ■■ [ Netscape ： TD 見本 8 : -— - 三-… ■- ■■一-: 0 ^ 

" mi ， 具 MiA みホ-ム m ガイド プリント 


A B 

c 

[1 「2 



データがない場合の表示例 


13〇 一 








__ Nn Ie Nn Ie 


■ 3 3レ4国 


FONT 

<FONT>~</FONT> 

フォント (FONT element) 

テキストレベル要素 


(«) © ► TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
IMG APPLET FONT BASEFONT BR MAP INPUT 
SELECT TEXTAREA SCRIPT 
一般的なテキスト 
6133 ► BODY 

HI H2 H3 H4 H5 H6 
ADDRESS 

P LI DT DD DIV CENTER 
BLOCKQUOTE FORM CAPTION TH TD 
TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET FONT 


mis - 誦 

文章中のテキストのフォントサイズや色を部分的に指定する要素です 0 フ 

開始タグ < FONT > と終了タグく/ FONT 〉 でマークアップされたテキストは、 才 

Web ブラウザで表示する場合、指定されたサイズと色力 5 !吏用されます。 ン 



COLOR 



属性は省略可 
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2 章 HTML リファレンス 


• FACE 


値 

働き 

H3 

N4 

14 

fontname 

フォント名を指定 

一 

! 

1 


属性は省略可 




number = 数値 


color = 色名 fontname = フォント名 


_SIZE 属性 

フォントサイズの指定には、絶対値による指定と相対値による指定の2種類の方 
法があります。 

絶対値によって指定する場合は、1〜7の整数を用ぃます。ただし、「絶対値」 
とぃっても一般のワープロや DTP のように正確に「〇ポイント」と指定できるわけ 
ではありません 0 実際に表示されるフォントサイズは、 Web ブラウザ側で設定され 
たサイズが基いになります。そのため、極端なサイズを指定すると、見る人によっ 
ては小さくて読めなくなったり、あるぃは大きすぎて読みづらくなるので、ユーザ 
が特定できる場合を除いて檳極的な使用はおすすめできません。 


<PXF0NT SIZE=”1"> 絶対値が 1 のフォントサィズですく / FONT></P> 
<P><FONT SIZE="2 _> 絶対値が 2 のフォントサィズです </FONT></P> 
<P><PONT SIZE= ， 3 _> 絶対値が 3 のフォントサイズですく / FONT></P> 
<P><FONT SIZE="4"> 絶対値が 4 のフォントサィズです </FONT></P> 
<P><FONT SIZE="5"> 絶対値が 5 のフォントサイズです </FONT></P> 
<PXF0NT SIZE=”6">*g 対値が 6 のフォントサイズですく / FONT></P> 
<P><FONT SIZE="7 _> 絶対値が 7 のフォントサイズですく / FONT></P> 


□ : V -_ Netscape FONT 霓本 1 _ _ 0 日 


wwd みホ-ム iHf siv プリント »ifc Q 



格 Wtt が2«©フ*ントサイズです 

絶?僅が3のフォントサイズです 
珀対灌が4のフォントサイズです 


絶対値が 5 のフォントサイズです 

絶対値が6のフォントサイズです 

絶対値が7のフォントサイズです 


* -1 恥备 


132 


SIZE 厲性の表示例 















FONT 


ただし、 Lynx などテキストブラウザでは、画面上では SIZE 属性を表現できませ 

ん〇 

なお、相対値による指定については、 BASEFONT 要素 （ P .135) を参照してく 
ださい。 

• COLOR 属性 

Web ブラウザで HTML 文書を表示する場合、テキスト色を部分的に変更したい 
場合に使用します。色は16進数、あるいは色名で指定します （ P .24 参照)。 


<P>COLOR 属性で <FONT COLOR= "##f f 0000 ■ > 赤色 </FONT> を指定し 

ています </P> 

<P>C0L0R 属性で <F0NT C0L0R= ， red"> 赤色 </F0NT > をネ旨定していま 
すく /P 》 


□ Netscape FONT 

見本 2 


]s|_ Ml _ ^ 覊供み iA みホ-ム 輪豪 

ガイ F 

プリント 

COLOR 届性て••开•色を措定しています^- 

COLOR 属性て••赤色を指定しています ◄ - 

{ 16進数で指定1 
{ 色名で指定1 



COLOR 厲性の表示例 


なお、テキストに色を指定する場合、背景色との組み合わせによっては非常に見 
えにくくなる場合もあります。背景色は HTML 文 IT 側で指定がない場合、 Web ブ 
ラウザに設定してある色用されます。 

もし必、要が’あって COLOR 揉性をイ吏用する場合は、 BODY 要素の BGCOLOR 厲 
性 （ P .25 参照）も含めて設定を行った方がいいかもしれません。ただし、人の視覚 
には差があります。ユーザによっては、自分に見やすいテキスト色と背景色を Web 
ブラウザで設定している場合もあります。それを COLORK 性や BGCOLOR 属性 
で強制的に切り替えられると、かえって見えづらくなってしまう可能性もあります 
ので、ユーザが特定できる場合を除いて積極的な使用はおすすめできません。 











2 章 HTMUJ フアレンス 
參 FACE 属性 

Web ブラウザで HTML 文書を表示する場合、表示フォントの種類を具体的なフ 
ォント名で指定する属性です 0 しかし 、 Netscape Navigator と Internet Ex 
plorer のみが解釈できる独自拡張なので、一般の HTML 文書では使用しない方が 
いいでしよう。 


<P>FACE 属性で <FONT FACE= "Chicago">Chicago</FONT> を指定 
しています </P> 

<P>FACE 属性でく FONT FACE= - symbol■ >Symbol< / FONT> を指定して 
いますく / P> 

<P>FACE 属性で < FONT FACE= " 新ゴ B" > 新 3B</F0NT > を指定しています 
</P> 


□ : . =---- : Netscape ： FONT 見本 3 QE 

r ： R る *» み iA みホ-ム M ガイド £»« プリントセキ¢1 

face 属性で Chicago を指定しています 
FACE 属性で2：释 po 入を指定しています 
FACE 属性で新ゴ B を指定しています 

Netscape Navigator での FACE 厲 性の使用例 

また、ユーザが特定できる場合でも、作者が希望するフォントを全てのユーザが 
システムにインストールしているとは限りません。したがって、この属性を使用す 
る場合は、複数のフォント名を候補として挙げておくことができます0候補は「，」 
で区切って並記します0また、その候補に該当するフォント全てか育在しない場合 
は域性が無視されて、 Web ブラウザに設定されている標準フォントを使用して表示 
されます。 
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關關 


BASEFONT 


<BASEFONT> (»7 夕 ^ « し ) 


.(BASEFONT element) 


テキストレベル要素 


向©►-空 
0133 ► BODY 

HI H2 H3 H4 H5 H6 
ADDRESS 

P U DT DD DIV CENTER BLOCKQUOTE 
FORM CAPTION TH TD 
TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET FONT 




文章中のテキストの基準となるフォントサイズを指定する要素で、通常は FONT 


要本の SIZE 域性（相対値指定）と組み合わせて使用します。 

BASEFONT 要素は開始タグく BASEFONT 〉 のみでマークアップされる、いわ 
ゆる空の要素です。終了タグは省略ではなく、もともと存在しません0 


MH1- 


參 SIZE ( 初期値： 3) 



BHEEI 

I2EI 

mm 

number サイズを絶対値で指定 （ 1 〜 7) 


〇 

〇 


属性は省略可 


numbers 数値 


フ 

才 


率 - 

•SIZE 属性 

基準となる フォン トサイズを指定します0値には1 〜 7の整数7^吏用できます。 
BASEFONT 要素で基準 フォント サイズを指定すると、それ以降のテキストに 
FONT 要素の SIZE 属性で相対値指定（値の前に「 + 」や「•」を付加）を行った場合、 
このフォン トサイズを基にした相対値で表示されます0ただし、 FONT 要素の SIZE 
属性の絶対値指定 （ 1〜7 ) に換算して、それを超えるサイズは表示できません。 
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1 章 HTMLII フアレンス 


なお、実際に表示される フォント サイズは、 Web ブラウザ側で設定されたサイズ 
がさらに上位の基準になります。そのため、 BASEFONT 要素に極端なサイズを指 
定すると、見る人によっては小さくて読めなくなったり、あるいは大きすぎて読み 
づらくなるので、ユーザが特定できる場合を除いて積極的な使用はおすすめできま 


せん。 


く PXBASEFONT SIZE=_4"> 以降の基準フォントサイズは「 4 」になります 
</P> 

<P><FONT SIZE=" + 1_> 相対値が 1 のフォントサイズですく / FONT></P> 
<P><PONT SIZE=_+2"> 相対値が 2 のフォントサイズですく / FONT></P> 
<PXF0NT SIZE=" + 3"> 相対値が 3 のフォントサイズですく / FONT></P> 
<PXF0NT SIZE»-+4-> 相対値が 4 のフォントサイズです </FONT></P> 
<P><FONT SIZE="-1"> 相対値が -1 のフォントサイズです </FONT></P> 
<P><FONT SIZE="-2_> 相対値が -2 のフォントサイズですく / FONT></P> 
<P><PONT SIZE»"-3"> 相対 fll が -3 のフォントサイズですく / FONT></P> 
<P><FONT SIZE=--4 ， > 相対値が -4 のフォントサイズです </FONT></P> 


□ Netscape ： BASEFONT JU：1 QB 


r ： > 鼸*»4 み ホ 

•A Wrm tH f StY プリント fcl 

x > JT 4 

以»の 基* フォントサイズ (3 

f4 j になります 


相対値が 1 のフォントサイズです ◄ - c 

4+1=5 ) 

相対値が 2 のフォントサイズです ^ —— 

- ( 4+2=6 ] 

相対値が3のフォントサイズです1 



[ 4+3=7 j 

相対値が4のフォントサイズです ラ 

[ 4+4=8 (絶対値が 7 以上になる場合は、 7 のサイズで表示される） 1 

相?が- 1 のフォントサイズで■す^ - 1 

4-1=3 ) 

ド.’' 「。二す r 5 







4-4=0 (絶対値が 1 未滿の場合 



は、 1 のサイズで表示される） 



SIZE 厲性の股定例 


ill 












TT <TT>-</TT> 


等幅フォント (TeleType or monospaced text style ) テキストレべル要素 


阅 ©► TT I B U STRIKE BIG SMALL SUB SUP EM 

STRONG DFN CODE SAMP KBD VAR CITE A 
IMG APPLET FONT BASEFONT BR MAP INPUT 
SELECT TEXTAREA SCRIPT 
一般的なテキスト 
0113 ►- BODY 

HI H2 H3 H4 H5 H6 
ADDRESS 

P DT DD LI DIV CENTER 
BLOCKQUOTE FORM CAPTION TH TD 
TT I B U STRIKE BIG SMALL SUB SUP EM 

STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET FONT 

-誦 

フォントスタイルを大まかに指定する要素です。 フ 

開始タグ<丁丁>と終了タグ</丁丁>でマークアッブされたテキストは、 Web ブラ オ 

ウザで表示する場合、タイブライターでの出力をイメージするために、等幅フォン ノ 
卜（として設定されているもの）が使用されます。 卜 

<P>Kamata Masato-keyboards / Okamoto Shingo-bass / 

Enuma Manabu-vocal / Yoshida Taro-arums / Miyanaga 
Jiro-guitar</P> 

<P><TT>Kamata Masato-keyboards / Okamoto Shingo-bass 
/ Enuma Manabu-vocal / Yoshida Taro-drums / Miyanaga 
Jiro-guitar</TTx/P> 
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HTMUJ フアレンス 





















(w) ©I 


M3I 


TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET IMG FONT BASEF 〇 NT BR MAP INPUT 
SELECT TEXTAREA SCRIPT 
一般的なテキスト 
BODY 

HI H2 H3 H4 H5 H6 
ADDRESS 

P DT DD LI DIV CENTER 
BLOCKQUOTE FORM CAPTION TH TD 
TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET FONT 


フォントスタイルを大まかに指定する要素です 0 

開始タグ <1> と終了タグ </1> でマークアツブされたテキストは、イタリツク表示 
されます。 

、 パ、 八•▲づ、.•二 ノ 1 - 。:. ン 

<P>Debut Single 「クローバー」く / P> 

<P><I>Debut Single 「クローバー」 </Ix/P> 



I 要索の使用例 





1 章 HTMLII フアレンス 


□ 


； myoo 


Debut Single r クローハー J 
Debut Single f クローパー J 


画面上では I 要索の内容 
は区別できない 


Lynx での表示例 


なし 



なし 


Column フオト関連の要素について 


イ可度もくり返しになりますが、 HTML の本来の目的はテキストデータを使 
用することによって文害の互換性を維持しつつ、かつ文害の構造をマークア 
ップすることによって、その情報を誰もがが間違いなく共有することにあり 
ます。 

しかし、インターネット利用者の劇的な増加に伴って「見栄えのいい 
Web ページを作りたい•見たい」という要求が多くなってきました。そこで、 
HTML 3.2 ではいくつかの見栄えに関する要素が定義されています。フォン 
卜関連の要素もごく基本的なものは HTML 2.0 で定義されていましたが、多 
くは HTML 3.2 で追加されたものです。 

HTML 3.2 のフォント関連の要素を使用すれば、少なくともテキストに関 
してはかなり見栄えを制御できます。しかし、強制的なフォントサイズや色 
の制御は、見る人の環境によってはかえって見づらくなる可能性もあります 
ので、その使用に当たっては注意が必要です。できれば、 FONT 要素の使 
用は避け、サイズは BIG • SMALL 要素、スタイルは TT • I • B • SUB • 
SUP 要素あたりで調整するのが無難です。 
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1111 

B <B>~</B> 


ポールド （Bold text style) テキストレベル要素 


(Wl ©► TT I B U STRIKE BIG SMALL SUB SUP EM 

STRONG DFN CODE SAMP KBD VAR CITE A 
IMG APPLET FONT BASEF 〇 NT BR MAP INPUT 
SELECT TEXTAREA SCRIPT 
一般的なテキスト 
BODY 

HI H2 H3 H4 H5 H6 
ADDRESS 

P DT DD LI DIV CENTER 
BLOCKQUOTE FORM CAPTION TH TD 
TT I B U STRIKE BIG SMALL SUB SUP EM 

STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET FONT 


- 

フォントスタイルを大まかに指定する要素です 0 

開始タグ <B> と終了タグ </B> でマークアップされたテキストは、通常、ボール 
ド表示されます。 


<P>Second Single 「眩しい夜」 </P> 
<P><B>Second Single 「眩しい夜」 </Bx/P> 



フ 

才 


[^1 • : 

— "-*! -1 

@ K 驀 ホ -A Ml ガイ F SH 

プリント t 年 

Second Single 『较しい? 5j 


Second Single 「较しい夜 J j 


~T 


1 - (B 要素の内容はポールド表示される 1 



B 要索の使用例 
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HTML リファレンス 



Second Single 『眩しい夜 J 
Second Single 『眩しい ? 5j 


画面上では B 要索の内容 
は区別できない 


Lynx での表示例 







アンダーライン （Underlined text style) 


テキストレベル要素 


(W) © ► TT I B U STRIKE BIG SMALL SUB SUP EM 

STRONG DFN CODE SAMP KBD VAR CITE A 
IMG APPLET FONT BASEF 〇 NT BR MAP INPUT 

SELECT TEXTAREA SCRIPT 
一般的なテキスト 
■33 ► BODY 

HI H2 H3 H4 H5 H6 
ADDRESS 

P DT DD LI DIV CENTER 
BLOCKQUOTE FORM CAPTION TH TD 
TT I B U STRIKE BIG SMALL SUB SUP EM 

STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET FONT 




フォントスタイルを大まかに指定する要素です 0 

開始タグ <U> と終了タグ </U> でマークアッブされたテキストは、アンダーライ 
ン表示されます 0 





U 要索の使用例 










HTML リファレンス 







STRIKE <STRIKE>^</STRIKE> 


取消線 (STRIKE-through text style) テキストレベル要素 


¢5) ©► TT I B U STRIKE BIG SMALL SUB SUP EM 

STRONG DFN CODE SAMP KBD VAR CITE A 
IMG APPLET FONT BASEFONT BR MAP INPUT 
SELECT TEXTAREA SCRIPT 
一般的なテキスト 
01^ ►- BODY 

HI H2 H3 H4 H5 H6 
ADDRESS 

P DT DD LI DIV CENTER 
BLOCKQUOTE FORM CAPTION TH TD 
TT I B U STRIKE BIG SMALL SUB SUP EM 

STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET FONT 


1^2X1^ - 

フォントスタイルを大まかに指定する要素です 0 

開始夕 r<STRIKE> と終了夕 ^</STRIKE> でマークアッブされたテキストは、 
取消線が付加されます。 


< P > コイツは、手がつけられない！！ く/ P > 

< P >< STRIKE > コイツは、手力ずつけられない！ ! </ STRIKEX / P > 


フ 

才 



U ^ Netscape ： STRIKE^ 导本 1 _ _ H ^ 

" R る 風》みみホ-ム mm ガイ f © 情 プリント 

コイツは、手がつけられない！！ 

コイ ツ は， f がつけられない ！！ I 

^- 1 STRIKE 要索の内容には取消線が付加されるI 


STRIKE 要索の使用例 






HTML リファレンス 


: myaoi 


STRIKE 見本 1 U 


コイツは、手がつけられない！！ 

コイツは、手が■つけ6れない！！ J 







取消線は表現できないので、代替記 
号を用いて取消されるべき内容で 
あることを表現する 


Lynx での表示例 


なお 、 HTML 3.0 の審議段階で提案されていた同様の機能を持つ S 要素は、 
HTML 3.2 では採用されていません。 








1111 


BIG 


<BIG>~</BIG> 



テキストレベル要素 


(W) © ► TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
IMG APPLET FONT BASEFONT BR MAP INPUT 
SELECT TEXTAREA SCRIPT 


一般的なテキスト 

01133 BODY 

HI H2 H3 H4 H5 H6 
ADDRESS 

P DT DD LI DIV CENTER 
BLOCKQUOTE FORM CAPTION TH TD 
TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET FONT 


フォントスタイルを大まかに指定する要素です 0 

開始タグ 410> と終了タグ </810> でマークアッブされたテキストは、設定され 
ている標准フォントより若干大きめに表示されます。 


フ 

才 



<P> 全曲シングルかと思わせるクオリティ </P> 

<P><BIG> 全曲シングルかと思わせるクオリティく /BIG></P> 


P ぺ こ ■■二 — - . . -^Netscape ： Blu 見本 1 - Hb 

mi m ホ -a mi f stt プリ：/卜 

全曲シングルかと思わせるクオリティ 
全曲シングルかと思わせるクオリティ I 


[ BIG 要素の内容は若干大きめに表示される I 


BIG 要索の使用例 


147 










HTML II フアレンス 









Ilil 


SMALL 


く SMALL>~</SMALL> 



small font ) 


テキストレベル要素 


(W) ©► TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
IMG APPLET FONT BASEF 〇 NT BR MAP INPUT 
SELECT TEXTAREA SCRIPT 


一般的なテキスト 
BODY 


HI H2 H3 H4 H5 H6 
ADDRESS 

P DT DD LI DIV CENTER 
BLOCKQUOTE FORM CAPTION TH TD 
TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET FONT 


フォントスタイルを大まかに指定する要素です。 

開始夕 ^<SMALL> と終了タグく / SMALL> でマークアップされたテキストは、 
通常、設定されている標準フォントより若干小さめに表示されます 0 


< P > 他のバンドとはひとまわり違うスケールく/ P > 

< P >< SMALL >< 也のハ'ンドとはひとまわり違うスケーノレく/ SMAI / L ></ P > 


□ 


__ Netscape ： SMALL 

見本 1 i 


P1R 

|的 

次 

み iA みホ-ム M 

IS^if 

S19 

プリント t ^| Q | 

1-1 


他のバンドとはひとまわリ通うスケール 


他のバン P •とはひとまわり遠うスケ-ル| 


〔 SMALL 要累の内容は若干小さめに表示される I 


SMALL 要索の使用例 













1 章 HTML リファレンス 


0 - " ~ ^myoo 二 - BE 

SMftLL U 

他のパンドとはひとまわり違うスケール 

他のパント••とはひとまわ9逸うスケール | 

画面上では SMALL 要素の内容 
は区別できない_ 


Lynx での表示例 


MS=a 

なし 


なし 


15〇 







iiii 


SUB 


<SUB>~</SUB> 


下付添字 (places 


SUBscript 


阅 ©► TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
IMG APPLET FONT BASEFONT BR MAP INPUT 


SELECT TEXTAREA SCRIPT 

一般的なテキスト 

BODY 

HI H2 H3 H4 H5 H6 
ADDRESS 

P DT DD LI DIV CENTER 
BLOCKQUOTE FORM CAPTION TH TD 
TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET FONT 


フォントスタイルを大まかに指定する要素です 0 

開始夕 ^<SUB> と終了夕 r</SUB> でマークアッブされたテキストは、下付添 
字として表示されます。 


<P>CH3C00H</P> 

<P>CH<SUB>3</SUB>C00H</P> 


フ 

才 



□ -——- ~m Netscape ： SUB 見本 1 ■ - --^=--マ - : 0 fe 

r る 霣班み4みホ-ム 镄条 ガイド !こ、 プリント t 年 JQJ 

CH 3 C 00 H 

CfeCOOH 

1 -- 1 SUB 要累の内容は下付添字として表示される」 


SUB 要索の使用例 
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SUP 


<SUP>^</SUP> 


上付添字 (places text in a Superscript style) テキストレベル要素 


STRONG 


mWm 


IMG APPLET 

FONT BASEFONT 

SELECT TEXTAREA 

SCRIPT 

一般的なテキスト 


BODY 



HI H2 H3 

H4 

H5 H6 

ADDRESS 



P DT DD LI 

DIV 

CENTER 

BLOCKQUOTE 

FORM CAPTION 

TT 1 B U S 

JRIKE 

BIG SMAU 

STRONG DF 卜 

J CODE SAMP i 




フオン トスタイルを大まかに指定する要素です 
開始タグ <SUP> と終了タグく / SUP > でマー 
h 付添字として表示されます。 


<P>Fe3+</P> 

<P>Fe<SUP>3 + </SUPx/P> 


Netscape ： SUP 見本 


SUP 要累の内容は上付添字として表示される 


SUP 要索の使用例 


















HTMUJ フアレンス 








阋 ©► TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
IMG APPLET FONT BASEFONT BR MAP INPUT 
SELECT TEXTAREA SCRIPT 
一般的なテキスト 

01113 ►- BODY 

HI H2 H3 H4 H5 H6 
ADDRESS 

P LI DT DD PRE DIV CENTER BLOCKQUOTE 
FORM CAPTION TH TD 
TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET FONT 


- 

文章中の語句を強調したい場合に使用する要素です。 

開始タグ < 已 \1> と終了タグ </ 记 \1> でマークアッブされた語句は、 Web ブラウザ 
で表示すると周囲のテキストから区別できるようにイタリック表示されます 0 また、 
微妙に EM 要素の前後に空白を挿入して目立たせる Web ブラウザもあります 
(Netscape Navigator など)〇 


く P> 凡そ践祚の日には、中臣は天神の寿飼を奏せよ。 </P> 

<P> 凡そ践祚の日には、中臣は <EM> 天神の寿飼く / EM> を奏せよ。 </P> 


E] ■ 二 -…… ■ Netscape ： EM 見本 1 --- -- ^- H g 

R る 袤み kA みホ•ム 供《 ガイド S 馕 プリントセ年〇| 

凡そ S 费釘の日には、中臣は天神の寿词を赛せよ0 
凡そ S 餐祚の日には、中臣ば天神の系薄1を奏せよ。 


EM 要素の内容はイタリツク表示される 


















1 章 HTMLU フアレンス 


r^EI klemi 

Jl そ践祚の日に ( 

凡そ践祚の日にぐ 

」 r WOi 

EM 見本 1 

J 、 中臣は天神の寿詞を奏せよ 

す、中臣は至連^語を奏せよ 众 

▲ 




Lynx での表示例 


EM 要素は語句を強調するために、一般的にはイタリックで表示されますが、 
周囲の文章が既に I 要素（イタリック）であれば、どう表現されるのでしょ 
ラ？ 

EM 要素の本来の意味からすれば、なんらかのフォントスタイル変更が自動 
的に行われなければならないはずです。しかし現在のところ、そこまで気の利 
いた Web ブラウザはないようです 0 ただ 、 Netscape Navigator などのよう 
に、 EM 要素の前後に空白を挿入して目立たせているものでは、なんとか周 
囲のテキストと区別することが可能です（わかりやすいとは言えませんが)。 


<P> 凡そ践祚の日には、中臣は天神の寿飼を奏せよ。 く nr> 

く P><I> 凡そ践祚の日には、中臣は <EM> 天神の寿飼 </EM> を赛せよ。 
</lx/P> 


E ~ BNetscape ： EM H^2 ■ ■ ■■ — ：； - if -： PI F 

Mi 次 みホ-ム M ガイ！： プリント fc キ 

凡そ M 針の日(こは、中臣は天神の寿珂を奏せよ0 

凡その日には、中 s は天神の寿詞 を赛せよ。 

f _ t_ I EM 要索の内容の前後に空白が挿入 

L されるので、かろうじて区別が可能 


Netscape Navigator での表示例 
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EM 


I EM 見本 2 


mE 


1 レス： s 匚 


Nil 

そ 

V 


凡そ技釘の日には、中臣は天神の寿1司を奏せよ 0 
凡そ践釘め日には、中臣は天神の寿詞杏券せょ令 


このような例の場合、画面上では 
EM 要索の内容を区別できない 


EM 要索の Internet Explorer での表示例 


ws=a 

なし 


なし 


Column フレーズ要素とフォント関連の要素の違い 


HTML ではテキスト中の特定の語句（フレーズ）の内容を意味づけする 
ために「フレース要素 （Phrase element)」 と総称される要素が用意され 
ています。たとえば、テキスト中にある人名や専門用語を強調したい場合、 
引用元文害のタイトル、プログラムのソースなどを明示したい場合などに使 
用されます。 

Web ブラウザでは、フレーズ要素を周囲のテキスト（いわゆる地の文）か 
ら区別するために、表示フォントスタイルや種類を変更したりします。その 
ため、使用方法がフォント関連の要素と混同されやすいのですが、フォント 
関連の要素が直接的に表示スタイルを指定するのに対して、フレース要素 
の表示スタイルは、あくまでも便宜的なものです。要は最低限周囲のテキス 
卜と区別できればいいのですから、 Web ブラウザや環境によって表示スタイ 
ルが異なるのも当然です。また、その区別は画面上とは限りません。たとえ 
ば、音声出力が可能な Web ブラウザや専用アプリケーションでは、音置や 
音程、あるいは速度を変更して表現するかもしれません。見た目の機能は 
似ていても両要素の意味は全く異なります。くれぐれもフレース要素を「フ 
ォントスタイルの変更」のために使用しないよう、気をつけてください。 










1111 


STRONG 


<STRONG>^</STRONG> 


より強い強調 (STRONG emphas 



向 TT I B U STRIKE BIG SMALL SUB SUP EM 

STRONG DFN CODE SAMP KBD VAR CITE A 
IMG APPLET FONT BASEF 〇 NT BR MAP INPUT 
SELECT TEXTAREA SCRIPT 


一般的なテキスト 

6113 ►- BODY 


HI H2 H3 H4 H5 H6 
ADDRESS 

P LI DT DD PRE DIV CENTER BLOCKQUOTE 
FORM CAPTION TH TD 
TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET FONT 


- 

文車中の語句を並みの強調よりさらに強調したい場合に使用する要素です。 

開始タグく STRONG 〉 と終了タグく / STRONG 〉 でマークアッブされた語句は、 
周囲のテキストから区別できるようにボールド表示されます。 


<P> 忌部は神璽の鏡剣を上れ。 </P> 

<P> 忌部はく STRONG 〉 神璽の鏡剣く / STRONG 〉 を上れ 0 </P> 


□ 二 ^:— 

Netscape ： STRONG 見本 1 _ 

-- ::: マー - p] 円 

る 

X 晨费 みみ ホ-ム 》金 ガイ！= 



忌部は神里の捎釗を上れ 0 


忌部(才冲璽の校釗を上れ0 


fSTRONG 要素の内容はポールド表示される1 

STRONG 要索の使用例 


巧8 
















STRONG 



忌部は神璽の钹判を上れ。 
忌部は迪里^刻を上れ。 


アンダーラインを使用 
して STRONG 要索の 
内容を区別する_ 


Lynx での表示例 








DFN 


<DFN>~</DFN> 


定義語句 (DEfiNing instans of the enclosed term) 



向 ©► TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
IMG APPLET FONT BASEF 〇 NT BR MAP INPUT 
SELECT TEXTAREA SCRIPT 


一般的なテキスト 

61133 ► BODY 


HI H2 H3 H4 H5 H6 
ADDRESS 

P LI DT DD PRE DIV CENTER BLOCKQUOTE 
FORM CAPTION TH TD 


TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET FONT 


文章中の語句を定義された語句として強調したい場合に使用する要素です。 

開始タグく DFN > と終了タグく / DFN > でマークアッブされた語句は 、 Internet 
Explorer では表示する場合、周囲のテキストから区別できるようにイタリック表 
示されますが 、 Netscape Navigator ( 次ページ「注意」参照）や Lynx では表示上 
の変化はありません 0 


<P> 凡そ大嘗は世毎に一年、国司事を行え。以外は年毎に <DFN > 所司 
く / DFN> 事を行え。く / P> 

<DL> 

<DT> 所司 </DT> 

く DD> 在京諸司で祭事を預かる者。 </DD> 

</DL> 


l60 






見本 



















CODE 


<CODE>~</CODE 


ド (program CODE) 


向 ©► TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
IMG APPLET FONT BASEFONT BR MAP INPUT 
SELECT TEXTAREA SCRIPT 


一般的なテキスト 
■33 BODY 

HI H2 H3 H4 H5 H6 
ADDRESS 

P LI DT DD PRE DIV CENTER BLOCKQUOTE 
FORM CAPTION TH TD 
TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET FONT 




文窣中の語句が、コンピュータのブログラムコードからの抜粋であることを強調 
したい場合に使用する要素です。 

開始タグ<(：00£>と終了タグ</000巳> でマークアッブされた語句は、周囲の 
テキストから区別できるよう、表示に等幅フォントが使用されます。 


<P>Finder を操作する AppleScript は tell application “Find 

er” で始まり、その後に具体的な命令が続き、最後に end tell で終わります。 
</P> 

<P>Finder を操作する AppleScript は <CODE>tell application 
“Finder” </CODE> で始まり、その後に具体的な命令が綾き、最後に 
<CODE>end tell</CODE> で終わります 0 </P> 




CODE 


: Netscape ： CODE 見本 1 


； 0E 


民る 


具 》 み iA みホ-ム 


ガイ F 


Sit プリント fc キ 


Finder を橡作する Apple Script は tell application M Fir»dM M で • 始ま 9 、その後(こ具体的な 
命令が • 搭き、最後に end tell で終わります 0 


Finder を}#作する Apple Script (决 tel 丨 oppl i cat ion Tinder 卞-始まリ、その後(こ具 
体的な命令が筏き、最後に“ UII て-終わリます。 ▲ ~ 

U CODE 要素の内容表示には 


等幅フォントが使用される 


III 

CODE 要索の使用例 


myoo 


0B 


CODE 


Finder を橡作する AppleScript は tel 丨 application Tiryjer " で始ま9、その後 
(こ具体的な命令が統き，最後(こ ㈣ UII で終わり 


?わります。 


Finder を橡作する闩叩1«5<:»^1は1*11 appl i cot ion Tind « r ~ て•始まリ、その後 
(こ具体的な命令か減き、最後(こ * nd UII で終わリます。 


画面上では CODE 要索 
の内容を区別できない 


Lynx での表示例 


語句への意味づけ 
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3 3 4 4 


SAMP <SAMP>-</SAMP> 


サンプル出力 (SAMPIe output from programs and script ) テキストレベル要素 


阋 TT I B U STRIKE BIG SMALL SUB SUP EM 

STRONG DFN CODE SAMP KBD VAR CITE A 
IMG APPLET FONT BASEFONT BR MAP INPUT 
SELECT TEXTAREA SCRIPT 
一般的なテキスト 
■33 BODY 

HI H2 H3 H4 H5 H6 
ADDRESS 

P LI DT DD PRE DIV CENTER BLOCKQUOTE 
FORM CAPTION TH TD 
TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET FONT 

文章中の語句が、コンピュータのブログラムやスクリプトからのサンブル出力で 
あることを強調したい場合に使用する要素です。 

開始タグ<8八1^1卩> と終了タグ</8八\1卩> でマークァッブされた語句は、周囲の 
テキストから区別できるよう、表示に等幅フォントカ嗰用されます0 

<P>Finder 上でファイルを選択する基本スクリプトは 、 select file 
"file name" of folder "folder name" of disk "volume 
name” となります。 く/ P> 

<P>Finder 上でファイルを選択する基本スクリプトは、 <SAMP>select 
file "file name" of folder "folder name” of disk 
"volume name" く/ SAHP> となります。 く/ P> 
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SAMP 


□ ^= 


H Netscape ： SAMP 

見本 1 ■ 

_ _ - ■_ m e 

J 民る 


み 4 みホ -A 情条 

カイ != 



Finder 上て " フ 7 ィルを遇択する基本スクリブトは 、 select file "f: 
"folder name" of disk "volume name" とな 9 ます。 


e" of folder 


Finder 上でフ 7 イルを遇択する基本スクリブト (^[select file 
folder -folder name- of disk ~voIu»e na»e な 9 まず 0 

L ^ 


SAMP 要素の内容の表示に 
は等描フォントが使用される 


SAMP 要索の表示例 


: myao 


SE 


Finder 上でフ 7 イルを强尺する基本スクリプトは . select fil 
of fold«r "folder name~ of disk "volume no«e . •となリます。 


SftMP 

"file name" 


Fir>d«r 上でフ 7 イルを ® 尺する基本スクリプトは、 select fM« "file 
of folder *• fold«r name" of disk "volume na«e~ となリます。 


画面上では SAMP 要索の 
を区 ® できない _ 




Lynx での表示例 


語句への意味づけ 



^5 



















ilil 

KBD <KBD>^</KBD> 


L ーザによる入力 (text to be typed by the user) テキストレベル要素 


(K) ©► TT I B U STRIKE BIG SMALL SUB SUP EM 

STRONG DFN CODE SAMP KBD VAR CITE A 
IMG APPLET FONT BASEF 〇 NT BR MAP INPUT 

SELECT TEXTAREA SCRIPT 
一般的なテキスト 
6333 ► BODY 

HI H2 H3 H4 H5 H6 
ADDRESS 

P LI DT DD PRE DIV CENTER BLOCKQUOTE 

FORM CAPTION TH TD 

TT I B U STRIKE BIG SMALL SUB SUP EM 

STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET FONT 


- 

文章中の語句が、ユーザの操作によって入力されるべきものであることを強調し 
たい場合に使用する要素です。 

開始夕 ^<KBD> と終了夕 y</KBD> でマークアッブされた語句は、周囲のテキ 
ストから区別できるよう、表示に等幅フォント 7^ 吏用されます 0 


く P> もしファイルを削除しても大丈夫なら yes と入力し、さらに 【 return 】 を 
押してください。く / P> 

<P> もしファイルを削除しても大丈夫ならく KBD>yes と入力 </KBD> し、さら 
にく KBD> 【 return 】 を押しく / KBD> てください。 </P> 


□ 

二て 1 Netscape ： KBD 見本 1 B B 

ザ 

0J 

民る 爲 as み ii みホ-ム mm ガイド プリント t *4| Q | 


もしフ7イル杏印形余しても大丈夫なら於と入力し、さらに 【return】 を押してくだ 
さい0 


もしフ 7 イルを 則 除しても大丈夫な与 ges と入力) 0 、 さらに [Treturnl をネ -Cj て < 

KBD 要素の内容の表示には t T 

等幅フォントが使用される J 


KBD 要索の Netscape Navigator での表示例 









Lynx での表示例 
















關關 


VAR 


<VAR>-</VAR> 


変数や引数 (VARiables or arguments 




阅 ©► TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
IMG APPLET FONT BASEFONT BR MAP INPUT 
SELECT TEXTAREA SCRIPT 


一般的なテキスト 
6113 BODY 


HI H2 H3 H4 H5 H6 
ADDRESS 

P LI DT DD PRE DIV CENTER BLOCKQUOTE 
FORM CAPTION TH TD 
TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET FONT 




文章中の語句が、 コン ビュータのブログラムやスクリプト の 変数や引数であるこ 
とを強調したい場合に使用する要素です。 

開始タ グく VAR > と終了タ グく PJAR > でマークアッブされた語句は、周囲のテキ 
ストから区別できるようイタリック表示されます。 


< P > アイコンの位置を移動するには「オブジェクトの位置を { x , y } にする」 
と記述します。 </ P > 

< P > アイコンの位置を移動するには「く▽从>オブジェクト </ VAR > の位置を 
{< VAR > x </ VAR > # < VAR > y </ VAR >) にする』と記述します。く/ P > 
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民る 


風35み4みホ-ム 


mm 


ガイ F 


m 


プリント 


セキ S 


アイコンの位屋を移助するには r オブジェクトの位屋を （x,y) にする J と記述 
します0 


アイコンの位匿を移 It) するには (5 ■グジ z ク H の位屋を®/2)}にする j と記 

述しまれ 十 牛牛 


VAR 要累の内容はイ 
タリック表示される 


VAR 要索の使用例 



VAR 要索の Windows 版 Internet Explorer 3.0 での表示例 




















NnIIeINniIe 

3 3 4 4 


CITE <CITE>-</CITE> 


引用や参照語句 （CITarions or references to other sources ) テキストレへル要索 


(W) ©► TT I B U STRIKE BIG SMALL SUB SUP EM 

STRONG DFN CODE SAMP KBD VAR CITE A 
IMG APPLET FONT BASEFONT BR MAP INPUT 
SELECT TEXTAREA SCRIPT 
一般的なテキスト 
CSH3 ►- BODY 

HI H2 H3 H4 H5 H6 
ADDRESS 

P LI DT DD PRE DIV CENTER BLOCKQUOTE 
FORM CAPTION TH TD 

TT I B U STRIKE BIG SMALL SUB SUP EM 

STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET FONT 


要素&概要 


引用、参照元文害のタイトル • 著者名などを明示する場合に使用する要素です。 
開始夕 ^<CITE> と終了タグ </01 丁已 > でマー クアッブされた語句は、周囲のテ 
キストから区別できるようイタリック表示されます。 

<P>HTML 2.0 については RFC 1866 を参照してください 0 </P> 

<P>HTML 2.0 については <CITE>RFC 1866 く / CITE> を参照してください。 
</P> 
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CITE 要索の使用例 



II 


Lynx での表示例 



















illl 


FORM 


<FORM>^</FORM> 


• ム (The FORM element) 


向 ©► HI H2 H3 H4 H5 H6 
ADDRESS 

P UL OL DL (DIR) (MENU) PRE DIV 
CENTER BLOCKQUOTE ISINDEX HR TABLE 
TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE 
INPUT SELECT TEXTAREA A IMG APPLET FONT 
BASEF 〇 NT BR MAP SCRIPT 


一般的なテキスト 
BODY 


DIV CENTER BLOCKQUOTE FORM TH TD DD 
LI 


アンケートやメッセージ（ゲストブックや伝言板など）を受け取るために、多くの 
Web サイトで「フォーム」力嗰用されています 0 このフォームは Web ブラウザだけ 
でなく、若干の機能制限はあるものの Lynx などテキストブラウザでも使用可能で 
す 0 FORM 要素は、このフォーム機能を実現するための要素です 0 
開始タグ <FORM> と終了夕 /</FORM> の間には、フォームに必要なさまざま 
な要素（見出し • アドレス . ブロックレベル.テキストレベルの各要素と一般的な 
テキスト）を置くことができますが(次ページ「注意」参照)、メインとなるのは具体 
的なフォーム機能の設定に関わる INPUT • SELECT • TEXTAREA 要素です。 

なお、フォーム機能ではデータをメールとして送信することも可能ですが、これ 
は Web ブラウザ側の機能によって制限が起こったり後処理が面倒になったりします。 
そのため、一般的にはデータをサーバの CGI スクリプトに渡して処理します。本書 
では属性の機能などを説明するために、メールソフトで受信した結果を載せていま 
すが、これは一般的な使用例でないことをあらかじめお断りしておきます。 CGI ス 
クリブトについては、専門の解説書をご賢ください 0 


フそ 



FORM 


HTML 3.2 の仕様害には 「 FORM 要素の内容は 、 INPUT • SELECT • 
TEXTAREA 要素のみ J と害かれていますが、 DTD では 「 FORM 要素の内 
容は、見出し • アドレス • ブロックレベル • テキストレベルの各要索と一般 
的なテキスト」と定義されていますので、本害の解説は DTD の定義に従いま 

した。 

なお、実は INPUT • SELECT • TEXTAREA 要素を FORM 要素外に置く 
こともできます 。 HTML 3.2 では具体的な使用方法がなさそうですが、 
HTML 4.0 ではスクリブトと併用して、フォームデータの送信以外のユーザ 
ーインターフェイスとして機能させることができます。 


<P> ご意見 • ご感想を頂ければ助かります。 </P> 

<F0RM ACTION*"http :/ /www.heian.go.jp/iken.cgi" 
METH0D="POST"> 

<TEXTAREA NAME="iken" ROWS*"3" COLS*"40"> (ここに言己述して 
ください） </TEXTAREA><BR> 

< INPUT TYPE= M submit" VALUE*" 送信 " > 

</F0RM> 



\m=m - 


•ACTION 



働き 

H 3 

N 4 


url 

送信したデータを処理する CGI スクリブトの URL 

〇 

〇1 

〇 


属性は省略可 













1 章 HTMLII フアレンス 


• METHOD (初期値： GET) 


■•画 ■— 1 1 1、ノ し' 


H 3 

N 4 


GET 

データを ACTION 厲 性で設定された 

URL の後に追加して送信 

〇 

〇 

〇 

POST 

データのみを送信 

〇 

〇 

〇 


属性は省略可 


• ENCTYPE (初期値： application/x-www-form-urlencoded) 



application / x - www - form-urlencoded 




rContent-TypeJ フィールドを付加せず送信 




multipart / form-data 

fContent-TypeJ フィールドを付加して送信 

〇 

〇 

〇 


ur/=URL 


厲性は省略可 


•ACTION 属性 

フオーム機能によって送信されたデータを処理する CGI スクリブトの URL を設定 
します。 


<FORH ACTION*"http://www.heian.go.jp/iken.cgi w > 

上記の例では、送信したデータは 「 http :// www . heian . go . jp / iken . cgiJ という 
CGI スクリプトによって処理されます。 

また、 「 mailto : メールアドレス」を設定すると、データはメールとして設定した 
メールアドレスへ送信されます。 


<FORM ACTION^"mailto:nkoiyohar@heian.go.jp"> 


ただし、メール送信機能に対応していない（あるいはメールソフトを連動させる 
ことができない） Web ブラウザでは、 rmailto : メールアドレス」はうまく利用できま 
せん。 
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FORM 


參 METHOD 属性 

フォーム機能によるデータの送信方法を指定します。具体的な方法には 「 GET 」 
と 「 POST 」 の 2 種類があり、属性を省略した場合は、 GET が初期値として使用さ 
れます。 

GET では、データは ACTION 域性で設定され URL の後に追加して送信されます。 

<P> お名前をお教えください。く / P> 

<FORM ACTION="http :/ /www.heian•go•jp/namae•cgi" 
METHOD="GET"> 

<INPUT TYPE="text" NAME="namae"> 

<INPUT TYPE="submit" VALUE* 1 • 送信 " > 

</FORM> 


□ Netscape ： FORM 見本 2 . _ 

- 

.QB 

|r：| 朽 次麗》み a みホ-厶 輪 * ガイ f 

Sf» 

プリント t ： キ 

:. Hkfft : A / /vwv .h^iin go. jp/nama« cgi 

お名前をお教爻ください。 



| Masato Kamota J 




METHOD 厲性の使用例 


rMasato KamataJ と人力して送信すると、 「 http://www.heian.go.jp/na 
mae.cgi?namae=Masato+KamataJ の文字列がサーバへ送信される 0 
? : URL とのデータの区切り記号 

namae : INPUT 要素の NAME 属性で設定したデータフイールド名 

Masato+Kamata : データフイールド 「 namae 」 の値。空白文字は「+」で置き換 
えられる 

一方 POST では、データ部分だけが送信されます。 

この GET と POST の使い分けですが、一般的には受信後のデータを特に加工 • 
整理する必要のないもの、たとえばデータベースサービスの検索文字列の送信など 
に GET が使用されます 0 また、 ENCTYPE 属性の値は 「 application/x-www- 
form-urlencodedj しか使用できないので、日本語などを大量に送信するのには 
向いていません。 


1 

■ 


フ 

才 

1 

ム 

iZ 

5 







1 章 HTMLU フアレンス 


反対に、データを受信後加工するなどの作業が必要なもの、たとえばゲストブッ 
クやアンケートなどでは POST 吏用されています。また、長めのデータを送信す 
る場合は、 POST の方が安全といわれていますし、送信するデータを Web ブラウザ 
の URL 棚に表示したくない場合も、 POST を使用します。ただ、サーバによっては 
POST ではうまく動作しなし、場合もあるそうです。 


• ENCTYPE 属性 

送信するデータの MIME の Content-Type (P.59 参照）を設定します0 Web ブ 

ラウザ（あるいはメールソフトなどのアプリケーション）は、データのヘッダの Con 
terU-Type フィールドにこの属性値を入れて送信します。 

1 • ENCTYPE="application/x-www-form-urlencoded •■の場合 

ENCTYPE 展性の初期値です。 

ASCII の文字セット （P.309 参照）に含まれない文字は、「％ +16進数 X 2」の 
組み合わせにエンコード（変換）して送信されます。また、空白文字は「 + 」に骹き 
換えられます0さらにフィールドか浪数ある場合は、区切りに「&」記号が用いられ 
ます。また、データの受信側は、一般的に CGI スクリプトで解析して、いったん特 
定の符号化方式 （UNIX 上では EUC が一般的）に復元して処理を行います。 

2 • ENCTYPE="multipart/form-data " の場合 

値に 「multipart/form-dataj を使用すると、データは複数のバートからなるデ 
一夕として送信されます0仕組みは MIME によるメールの添付ファイルと同じで、 
フオームの各フィールドが1つの添付ファイル（パート）として扱われます。また、 
各フィールドのデータの先頭には Content-Disposition フィールドが置かれ、デー 
夕の内容がフオームのデータ （form-data) であることやフオームのフィールド名 
(INPUT • TEXTAREA 要素の NAME 属性の値）などが入れられます。 

3りに、 Content-Type フィールドに charset パラメータカ咐加され、そこへ文 
字の符号化方式も入れられます。受信側のソフトウヱアは、この charset パラメー 
夕値によって、 データをあれこれ解析することなく、オリジナルの符号化方式に合 
わせてテータを復兀できます0そのため、この 「multipart/form-data」 は、 AC¬ 
TION 属性で 「mailto: メールアドレス」を設定し、データをメールとして受信する 
場合などによく使用されます。 

ただし、これらの機能を有効に使用するには、送信側の Web ブラウザ(あるいは 
メールソフトなどアブリケーシヨン）側が' MIME に基づくデータ送信に対応してぃ 
る必要があります。 
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<p> ご意見 . ご感想を頂ければ助かります。く / p> 

<FORM ACTION="mailto : nkiyohar@heian.go.jp" 

METHOD*"POST" ENCTYPE="multipart/form-data"> 
<TEXTAREA NAME="iken" R0WS="3" COLS="40"> (ここに記述して 
ください） </TEXTAREA><BR> 

<INPUT TYPE="submit" VALUE= " 送信 " > 

</FORM> 



このテキストをメールとして送信 


Subject: Form pos 



Date: Sun, 09 Aug 1998 18:00:05 +0900 

From: Toshihisa Oklhara aokitoriteian.go.jp> 

X-Mailer: Mozilla 4.03 [ja] (Macintosh; I; PPC) 

To: nkiyohar@heian.go.jp 
Subject: Form posted from Mozilla 

Content-type: multipart/form-data; boundary** - 

108841458513621 
Content-Length: 247 

Message-ID: < 1309436885-167663223 §mail.heian.go.jp> 


-108841458513621 

Content-Disposition: fora-data; name="iken" 

軍防令隊伍条「凡そ兵士は各隊伍を為せよ〇 J (こ 
ある rPSffij とは具体的に何を指すのでしょうか？ 
-108841458513621- 


ENCTYPE =” multipart パ orm - data " で送價されたメールの例 






































HTML リファレンス 


iToshihiso 0..., 18:01 98.8.9 ♦0... / Form posted from Mozilla 


I I Subject: Form pos 


From: Toshihisa Okihara く toJcihar@heian.go.jp> 
X-Mailer: Mozilla 4.03 [ja] (Macintosh; I; PPC) 

To: nkiyohar@heian.go.jp 
Subject: Form posted from Mozilla 
Content-type: application/x-wv-forn-ur 1 encoded 
Content-length: 211 

Message-ID: < 13094368 00- 167668360 @mai1.heian.go.jp> 


メールソフトは文字の符号化方 
式を知る手がかりがないため元 
通りにデコードできない（デコ 
ードには CGI スクリブトやユー 
ティリテイが必要） 


iJcen- 

% lBX24B73KINaBl)8X60X3Er%2 lVKX5EX24%3DJ%X%3Bt« 2403 FBb8X60%24r0Y%24X3B%24hX21X23 
% 2 1WX24KX 1BX28BX0D%0A% lB%24BX24X22X24kX2 lVBb8X60X21VX24HX 2406 qBNE* 
X24K2X3FX24r%3BXX249%24N%24GX247X24gX24X26X24X2BX21X29X1BX28B 


ENCTYPE 二 " application/x-www-form-urlencoded " で送信されたメールの例 


▽8 . 










INPUT 要素は、フォームのテキスト入力 欄 や選択ボタン、送信ボタンなどの設 
定に使用します0通常は FORM 要素内に®かれますが、テキストレベル要素なの 
で直接的にはさまざまな要素内に散くことができます。 

なお、 INPUT は開始タグ < INPUT > のみでマークアップされる、いわゆる空の要 
素です。終了タグは省略ではなく、もともと存在しません。 


<P> お名前 • ご連絡先をお教えください。 </P> 

く FORM ACTION®"https / /www.heian•go•jp/namae.cgi" 
METHOD*"POST"> 

► <P> 

名前： <flNPUT|TYPE="text" NAME="naxnae"><BR> 
連絡先 ： < INPUT TYPE* "text" NAME*" address "><BR> 

<[lNPUTITYPE="submit" VALUE*" 送信 " > ベ INPUT] 
TYPE ： *"reset" VALUE=- 取消 _> 

► </P> 

</form> 素の 

< ことがで 5 る 


入カフィールド • ポタンなど (The INPUT element) テキストレベル要素 


m 空 

■33 ► BODY 

HI H2 H3 H4 H5 H6 
ADDRESS 

P PRE DIV CENTER BLOCKQUOTE FORM CAP¬ 
TION TH TD DT DD LI 
TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET FONT 


INPUT 


<INPUT> ( 終了タグなし ) 




HTML リファレンス 

































INPUT 


•CHECKED ( 論理型 ) 




I2EI 

mm 

checked チェックボックスやラジオボタンの 

初期値をオン 

〇 

〇 

〇 


属性は省略可 


• SIZE 


1値 

働き 

H 3 

N 4 

14 

number 

テキスト入力欄の幅の設定（文字数） 

〇 

〇 

〇 


属性は省略可 


• MAXLENGTH 






mm 

number 

テキスト入力の最大文字数の設定 



〇 


厲性は省略可 


•SRC 


1値 

働き 


N 4 

14 

url 

画像付き送信ボタンの画像データの URL 

〇 

〇 

〇 


属性は省略可 


•ALIGN 


■■■■ 
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mm 

top 

画像付き送信ボタンを上揃え 


〇 

〇 

middle 

画像付き送«ボタンを中揃え 

〇 

〇 

〇 

bottom 

画像付き送信ボタンを下揃え 

〇 

〇 

〇 

left 

画像付き送信ボタンを左揃え 

〇 

〇 

〇 

right 

画像付き送價ボタンを右揃え 

〇 

〇 

〇 




/ exf = —般的なテキスト 


mmiber = 数値 


«性は省略可 

ur/=URL 


- 

參 TYPE 属性 

TYPE 属性はデータ入力形式を指定します。デフオルトで入力される値やフィー 
ルドサイズなど詳細は、その他の属性で指定します0 














2 章 HTMLU フアレンス 


1 . TYPE =" text " 

text は1行のテキスト入カフィールドを表示します。 

NAME 域性は必、須、その他詳細設定には 、 VALUE - SIZE • MAXLENGTH 
属性力何吏用されます。 























INPUT 


3. TYPE =" checkbox " 

checkbox はチェックボックスを表示します。チェックボックスは、複数の項目 
を選択する場合に使用されます。 

NAME 属性は必須、その他詳細設定には 、 VALUE • CHECKED 厲性が使用 
されます。 


H チェックボックスの指定〕 




< INPUT ITYPE="checkbox"l NAME="place" VALUE 

会社から 

<INPUT TYPE= "checkbox" NAME= "place" VALUE= " 学校 ” > 

学校から 

<INPUT TYPE= "checkbox" NAME*"place" VALUE= ■ 自宅 " > 

自宅から 

<INPUT TYPES"checkbox" NAME="place" VALUE=” そ (7M 也 ” 

その他 


- 


- B g | 

l 民る 

汝 稾供み;^みホ-ム __ ガイ F 

3 n I 

□ 会社から 

固字•校から固自宅から P その他 

チェックボックスは複数項目 



の選択が可能 


データ入力をチェックボックスにした例 


4. TYPE =" radio " 

radio はラジオボタンを表示します 0 ラジオボタンは、通常単数の項目を選択す 
る場合に使用されます。 

NAME 属性は必須、その他詳細設定には 、 VALUE • CHECKED 属性が使用 
されます。 


■{ラジオポタンの指定 I 


< INPUT[TYPE="radio")NAME=■os" VALUE*"Mac OS">Mac OS 
<INPUT TYPE="radio" NAME="os" VALUE="UNIX">UNIX (互換環 

境含む） 

< INPUT TYPE="radio- NAHE="os" VALUE=■BeOS■>BeOS 
く INPUT TYPE="radio" NAME="os" VALUE="Windows"〉Windows 











HTML リファレンス 



データ入力をラジオポタンにした例 


5. TYPE =" submit " 

submit は送信ボタンを表示します。送信ボタンをクリック（あるいはキー操作な 
ど ) すると、 FORM 要素の設定に基づいて、入カデータが送信されます。 

その他詳細設定には、 NAME • VALUE 属性が使用されます 0 




ポタンの指定例 


6. TYPE =” image " 

image は送信ボタンのラベルに画像を使用する、画像付き送信ボタンを指定しま 
す。画像がマウスなどでクリックされた場合、データと共にそのクリックされた座 
標（画像の左端から数えた pixel 数が X 、上端から数えた pixel 数が y ) も送信され 
ます。 























INPUT 


その他詳細設定には 、 NAME • VALUE • SRC • ALIGN 属性が使用されます。 
このうち SRC 属性は、画像データの所在を示すために必須の属性です0 
なお、 HTML 3.2 では INPUT 要素に ALT 属性が用意されていません。テキスト 
ブラウザや音声出カアプリケーションの種類によっては、送信ボタンか， y 用できな 
くなる可能性もあります。 

<P > 注文書の送信はこちら 
< INPUT TYPE-"image" 

ALIGNS"middle"> 

</P> 





INPUT 見幸 7 


右のアイコンか送 ® ボタンになっています办 iirna&ygic 


とりあえず画面つき送 
信ボタンである旨が表 
示され、使用も可能 


Lynx での表示例 


i8 

» - 


















2 章 HTML リファレンス 


7. TYPE =” reset " 

reset は取消ボタンを表示します。取消ボタンをクリック（あるいはキー操作など ) 
すると人力したデータがクリアされます。 

詳細設定には、 VALUE 属性が使用できます。 


< INPUT TYPE="reset" [VALUE= 
<INPUT TYPE="resef> i 


■ 取消 "1><BR> 


ボタンのラベルは VALUE 
厲性で設定する 


□ . INPUT 見本 8 0 日 


R る M MNK 19 ホ -A M ガイド SIS プリント 



TYPE 厲性に reset を指定した例 


8. TYPE =" file " 

file はファイル名の入カフィールドを表示します 0 

Netscape Navigator や Internet Explorer 4.Ox では、フイールドの右側に表 
示される「参照 ... 」ボタンを利用してファイルを選択します （ Windows 版の 
Netscape Navigator や Internet Explorer では、直接ファイル名を入力するこ 
とができる）。次いで送信ボタンをクリック（あるいはキー操作など）すると、入力 
されたファイル名のファイルが、 FORM 要素の ENCTYPE 属性の設定に基づいて 
送信されます。 

なお、このファイル送信機能は一般的には使用されていません 0 また、 Lynx な 
ど一部の Web ブラウザでは対応していません。 

NAME 属性は必須、その他詳細設定には 、 SIZE • MAXLENGTH 属性が使用 
されます。 


186 



INPUT 


<INPUT TYPE="file" NAME="file_data" SIZE="30" 
MAXLENGTH="30"><BR> 

<INPUT TYPE="submit" VALUE= "送信- > 



TYPE 属性に file を指定した例 

Mac OS 版の Netscape Navigator では「参照… J ボタンが文字化けします 
(機能的には問題ありません)。 



Lynx での表示例 


HTML 3.2 では、バイナリファイルの送信に対応していません。そのため、 
FORM 要素や INPUT 要素に ACCEPT 属性を追力卩し、ファイルの MIME コ 
ンテント形式を指定する方法が提案されていました。これは HTML 4.0 で正 
式採用されています。 


< INPUT TYPE="file" ACCEPT*■image/gif"> 















1 章 HTML リファレンス 


9. TYPE =" hidden ” 

hidden は不可視のデータフィールドを作成します。 Web ブラウザには何も表示 
されませんし、入力操作もできません0フィールドには VALUE 属性で指定された 
データが自動的に入力されます。たとえば、決まった値を CGI スクリプトに渡した 
い場合などに使用されます。 

NAME 属性は必須です。 



不可視フィールドを使用した例 


• NAME 属性 

データフィールドに名前を指定します0 

フォームで送信されるデータは、基本的に「入力されたデータ」だけです0そこで 
NAME 属性を使用して、データフィールドに名前を設定し、一体何のデータであ 
るか判別できるようにします。ほとんどの TYPE 属性で NAME 属性の指定が必須 
なのはそのためです。 
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INPUT 


<p> お名前 • ご連絡先をお教えください。 </p> 

<FORM ACTION= "mailto : nkiyohar@heian. go • jp" METHOD** 
"POST" ENCTYPE=_multipart/form-d ata_>| 「名前」のフイールド名 
<p> ▼ぐ. i v M を 「 namae 」 に設定 

名前 ：< INPUT TYPE*-text - lNAHE="namae»><BR> 

連絡先 ： < INPUT TYPE= "text" | NAMEs" contact ■)><BR> 

<INPUT TYPE="submit"iVALUE=" 送信 " > <INPUT 


<INPUT TYPE= 
TYPE*"reset" VALUE-"I 

</P> 

</FORM> 


: "^VALl 


連絡先」 のフイー) 
contact 」 に設定 


ド名を) 





ENCTYPE="multiparVform-data" で送信されたメールの例 
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2 章 HTML リファレンス 


籲 VALUE 属性 

データフイールドの初期値やボタンのラベル（表示名）を設定します。 TYPE 属性 
の値によって、その機能は異なります0 


1 . TYPE 属性が text • password • hidden (テキスト入力形式）の場合 

データフ イー ル ドに デフオルト で入力される値を設定します0入力例などの表示 
に使用します 0 ただし、 TYPE = "り idden " の場合は、 Web ブラウザ上ではなにも表 
示されないため、ユーザは変更できません。 VALUE 诚性で指定した値がそのまま 
送信されます。 

2. TYPE 属性が checkbox • radio (項目選択形式）の場合 

データが送信されるとき、選択された項目は VALUE 械性で設定した値に変換さ 
れます。 VALUE 诚性を省略すると、 「 on 」 が送信されます。 


<P> ご利用埸所をお教えください。 </P> 

<FORM ACTION^"mailto : nkiyohar@heian.go.jp" METHOD® 



</P> 

<P> 

<INPUT TYPE= "submit" VALUE= " 送信 - > <INPUT TYPE="re¬ 
set" VALUE=” 取消 ■> 



</P> 


</FORM> 
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INPUT 


s^m 


、」】： 

民る 

- 具 MiA みホ -A 供 逢 ガイド 

3 n] 


ご利用埸所をお教えください。 

因会?土から □ 字校から因自宅から □ その他 


[送 ffl 

選択した内容をメールとして送信 


口 完二 ^^ Toshlhisa 0... ,13:19 98.8.10 ♦... / Form posted from Mo2illa B 


I I Subject: Form posted from Mozilla 


Date: Mon,10 Aug 1998 13:19:15 >0900 

From: Toshihisa 0kihard <tokihar@heian.go.jp> 

X-Mailer: Hozilla 4.03 [ja] (Macintosh; I; PPC) 

To: nkiyohar(?heiaii.go.jp 
Subject: Form posted from Mozilla 

Content-type: multipart バ orn-data; bouwlar 产- 

591119713108 
Content-Length: 243 

Message-ID: < 1309367358 -171845096(?inail .heian.go. jp> 


-591119713108 

Content-Disposition: form-data; name®"place" 

会社 

-591119713108 

Content-Disposition: form-data; name="place" 

on 

-591119713108- 

- 1 VALUE 厲性の値 I 






(> ALUE 厲性あり I 


{> ALUE 属性なし I 



ENCTYPE="multipart/form-data " で送信されたメールの例 


3. TYPE 属性が submi い reset (ボタン形式）の場合 

送信ボタン、取消ボタンのラベル（表示名）を設定します0 
また 、 TYPE = " submit " におぃて NAME 厲性が指定してある場合、 VALUE 厲 
性の値も送信されます。 































1 章 HTML リファレンス 


<p> ご利用場所をお教えください。 </p> 

<FORM ACTION="mailto:nkiyohar@heian.go.jp" 
METHOD*"POST" ENCTYPE="multipart/form-data"> 

<P> 

<INPUT TYPE= B checkbox" NAME= "place” 会社から 
<INPUT TYPE= "checkbox" NAME= "place” 学校から 
<INPUT TYPE= "checkbox" NAMEyplace” 自宅から 
<INPUT TYPE="checkbox" UAME= "place” その他 

</P> ["NAME 厲性と VALUE 属性を設定 H 


<INPUT TYPE 
<INPUT TYPE 
<INPUT TYPE 
<INPUT TYPE: 
</P> 

<P> 

<INPUT TYPE: 
<INPUT TYPE=" 
</P> 

</FORM> 


="submit" lNAMEs"send_data" VALUE= "送 
reset" VALUE* • 取消 ■> 



ご利用埸所をお教えください。 

因会社から口羊校から口自宅から口その他 

ls?t] {WT\ 


a 択した内容をメールとして送信 


roshihlso 



[ | Subject: 


pate: Mon,10 Aug 1998 13:37:51 +0900 
From: Toshihisa Okihara <tokihar@heian.go.jp> 
K-Mailer: Mozilla 4.03 [ja] (Macintosh; I; PPC) 
To: nkiyohar0heian.go.jp 
Subject: Forn posted from Mozilla 

Content-type: aultipart/forai-data; boundary - 

8382719676 


Content-Length: 253 

Message-ID: < 1309366243-1719121439«ai1.heian.go.jp> 

-27558382719676 

Content-Digposition: fora-data; naae= M place" 


Content-Disposition: forai-data; 


e="8end data" 


NAME 属性の値 G 2 信ボタン 
m ~ 1 に設定したフィールド名 ) 
>ALUE 属性の値 1 [ 



ENCTYPE=* multipart/form-data” で送信されたメールの例 
































INPUT 


•CHECKED 属性 

TYPE 属性が checkbox • radio で、特定の要素（項目）をデフォルトで選択状 
態にさせたい場合に使用します。 CHECKED 属性を指定する場合は属性名は省略 
し、属性値 「 checked 」 のみを記述します ( P .8 参照)。 


< INPUT TYPE*-checkbox- NAME="place" 
<INPUT TYPE*"checkbox" NAMEs"place" 
<INPUT TYPE*"checkbox" NAME^-place 
<INPUT TYPE*"checkbox" NAMEB"place 


.会社から 

•学校から 


■ checked > 自宅から 

_> その他牛 


「目宅から」をあらかじめ選択さ 
れた状態に設定 


5^— 



iJE^I 


3 N 


ごれ用埸所をお教えください。 

□ 会吐から □ 字校から因自宅から □ その他 


最初から「自宅から」が選択され 
た状態で表示される_ 


CHECKED 厲性の使用例 


籲 SIZE 属性 

TYPE 诚性が text • password の場合、データフイールドのサイズを設定します 0 
設定は1バイト（いわゆる半角）文字数で行います。 

なお、 Windows 版の Web ブラウザでは、実際の表示サイズか 15：定通りにならな 
いことが'あります。 

• MAXLENGTH 属性 

TYPE 属性が text • password • file の場合、データ フイー ルドに入力可能な 
文字数を指定します。指定は1バイト（いわゆる半角）文字数で行います。ただし、 
SIZE 属性の値（データ フイール ドのサイズ）を超える値を指定しても、スクロール 
バーなどは表示されませんので、通常は SIZE 属性の値と同じ値を指定します。 

なお、 TYPE 属性が file の場合、参照ボタンで選択するファイル名は 










1 章 HTMUJ フアレンス 


MAXLENGTH 属性の制限を受けません。 

參 SRC 属性 

TYPE 域性が image の場合、画像付き送信ボタンに利用する画像の URL を指定 
します。 

參 ALIGN 属性 

ALIGNS 性は、画像付き送信ボタンの配置位置の設定を行います。 

表示結果は、 IMG 要素の ALIGN 属性 （ P .221 参照）を参照してください。 



INPUT 


Column Lynx とフオーム 


本文中ではレイアウトの都合もあって、テキストブラウザでのフォームの 
表示例をあまり載せられませんでした。その代わりといってはなんですが、 
P . X の「ビジュアル索引3」を Lynx で表示した例をここで紹介しておきま 

to 


自 ^^; sits - 


ご f • 見 & アンケー t 



このたひは、ペイジの Web サイトをこ訪問くたさいまして、誠(こありかとうこさ 
いました* 

こ: I ：見•こぞ货を»け f は的， 〆 < まての亍考資料とさ灯て頂きます • 

- :ン ; 卜 » 5 ご ■： | 

【こ f 見在 ] 

例）もう少し取〇扱い商品の蠕を広けて欲しい • _ . 




[織]- 

[*• ^ij r あなたの性別： 

嫩た韻へ 

[:1|j 用 / ノ瓌境 ] []Mac CS [X] llilX [ ] Hincto-s [ 】名«携帯縞末 

[ : 利用の Web マラウ —] (*) r*et:caoe igator ( ) Internet Evplcr^r 
()L ^： ( ) Cv^erdog () その他 


送るやりめし 


自然， 



「ビジュアル索引 3 J を Lynx で表示した例 

ご覧のように、 Lynx でも一般的な Web ブラウザと同様 、 HTML 3.2 のフ 
オーム機能を利用できることがお解り頂けると思います0もちろん、グラフ 
ィカルな表示はできないので選択メニュー （ SELECT 要素）は直接表現で 
きませんが、該当個所を選択すると、別途ボップアップメニューが表示され、 
項目 （ OPTION 要素）を選択することができます。 

なんとなく「テキストブラウザ=低機能」と思われがちですが、 Lynx は 
さまざまな工夫によって、他の Web ブラウザに引けを取らない機能を持っ 
ています。加えて、 HTML の解釈は正確、動作も軽快、それでいてフリー 
ウェア。 UNIX ューザを中心に愛用者が多いという事実も肯けます。 


フォ—ム 
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iiii 


SELECT 


<SELECT>~</SELECT> 



- (The SELECT 



阅 ©► OPTION 


※1 個以上 
61133 ►- BODY 

HI H 2 H 3 H 4 H 5 H 6 
ADDRESS 

P PRE DIV CENTER BLOCKQUOTE FORM CAP 
TION TH TD DT DD LI 
TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET FONT 


- 

SELECT 要素は、フォームで複数の項目から 1 つの項目、または複数の項目を 
選択するメニューに使用します〇 SELECT 要素は、通常は FORM 要素内に ( S かれ 
ます（テキストレベル要素なので、直接的にはさまざまな要素内に置くことができ 
る)〇 

開始タグく SELECT 〉 と終了タグ </ SELECT > で、選択メニューの範囲をマー 
クアップします。また、終了タグ </ SELECT > は省略可能です。内容としては、具 
体的な選択用の項目となる OPTION 要素（必須）のみを置くことができます。 


<P> ご利用塌所をお教えください。 </P> 

<FORM ACTION*"mailto:nkiyohar9heian.go.jp" 
METHOD-"POST- ENCTYPE**"multipart/form-data"> 

<P> ^ - 

[<SELECT NAME:"place"> 1 

<OPTION> 会社から < /OPTION 〉 

<OPTION> 学校から < /OPTION> 

<OPTION> 自宅から </OPTION> 

<OPTION> その他 </OPTION> 

|</SELECT> I 

<INPUT TYPE= "submit" VALUE* " 送信 ■> 

</P> ◄ - 

</PORM> 


他の要索の中に置 
<ことちできる 
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属性は 必須 


•SIZE 


number 選択項目の同時表示数(一！!式メニューの場合） 


〇 〇 〇 

属性は省略可 


(MULTIPLE ( 論理型） 


multiple 複数項目の選択を許可（一 R 式メニューの場合） 〇〇〇 

属性は省略可 


fex /= —般的なテキスト 


number = 数値 






























2 章 HTMLU フアレンス 


- 

參 NAME 属性 

データフィールドに名前を設定します0 SELECT 要素では必須の属性です0 
フォームで送信されるデータは、基本的に「入力されたデータ」だけです0そこで 
NAME 厲性を使用して、データフィールドに名前を設定し、一体何のデータであ 
るか判別できるようにします （ INPUT 要素の NAMEK 性 P . 188参照)。 

參 SIZE 属性 

SELECT 要素は、デフォルトではボップアップメニュー形式で表示されますが、 
SIZE 城性で選択項目 （ OPTION 要素）の同時表示数を設定すると、-覧式メニュ 
一形式で表示されます。 

诚性値は表示させる行数を設定します。また、 SIZE 城性で設定した値より項目 
数が多い場合は、メニュー右端のスクロールバーが省効になります。 

なお、メニューの表示幅は、骹長の選択項目に自動的に合わせられます0 


<SELECT NAME="favorite" SIZE="4"> 
<OPTION> 江沼学 (vocal) < /OPTION 〉 
<OPTION>g 永治郎 (guitar) </OPTION 〉 
<OPTION> 鎌田雅人 (keyboard) </OPTION 〉 
<OPTION> 岡本愼吾 (bass) </OPTION> 
<OPTION>* 田太郎 (drums) </OPTION> 
</SELECT> 


i Netscape ： SELECT 見本 2 言 


HE 


mi 


次 


み iA みホ-ム 


ガイド 


S (9 プリント t !4 Q 


fvaterj のお気に入9タンパーをお教爻ください。 


卿竿 （ 

S 秘郎 （ 

•» 田相人 （ 
阕本價吾 （ 


(vocal) 
(guitar) 


keyboard 

bass ノ — 


圆 


項目 （ OPTION 要索）数5に対し 
て、それ以下の SIZE 属性値を設定 
したため、スクロー)レパーが現れる 


SIZE 属性の使用例 
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SELECT 

• MULTIPLE 属性 

SIZE 属性を指定して一覧式メニューを使用した場合、 MULTIPLE 属性を設定 
することによつて複数項目 （OPTION 要素）の選択ができるようになります。 MUL 
TIPLE 属性を設定する場合は属性名は省略し、属性値 「multiple」 のみを記述し 
ます (P.8 参照)。 

<SELECT NAME="favorite" SIZE="4" multiple> 

<0PTI0N>2 沼学 (vocal)</OPTION 〉 

く〇卩打〇ぬ宮永治郎 （ guitar) </OPTION 〉 

<OPTION> 鎌田雅人 （ keyboard) </OPTION 〉 

<OPTION> 岡本惝吾 (bass) </OPTION> 

<0 卩 0?1011> 吉田太郎 (drums) </OPTION> 

</SELECT> 



199 




















ilil 


OPTION 


<OPTION>-</OPTION> 



一の項目 (The OPTION element) 



(w) 一般的なテキスト 

SELECT 


- 

OPTION 要素は、 SELECT 要素で表示される選択 メニューの 項目となる要素で、 
必ず SELECT 要素内に蹬かれます。 

開始タグ <OPTION> と終了タグ </OPTION> によって、選択メニューの項目か # 
マークアップされます。終了タグは省略可能です。 




•SELECTED ( 論理型 ) 



働き 


N4 


selected 

デフオルトの選択項目として股定 

〇 

〇 

〇 


属性は省略可 


•VALUE 


|値 

働き 


N4 

14 | 

text 

選択項目の代わ 0 に送信されるデータを股定 

〇 

〇 

〇 


厲性は省略可 





鲁 SELECTED 属性 


デフオルトで選択される項目を設定したい場合に使用されます 0 たとえば、あら 
かじめ選択する人が多いと思われる項目などで使用します。 SELECTED 属性を設 
定する場合は属性名は省略し、厲性値 「selected」 のみを記述します (P.8 参照)。 


<SELECT NAHE="place" SIZE="4"> 
<OPTION“I 沼学 (vocal) </OPTION> 
<OPTION>§ 永治郎 (guitar) </OPTION> 
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OPTION 


i -- ― .一一^— い 1-1 

jj | R 5 

fiSS み 4 み 

ホ-ム M Sit プリントセキ 



fvaterj のお気に入 9 メンバーをお教えください。 



SELECTED 厲性の使用例 


•VALUE 属性 

データが送信されるとき、選択された項目は VALUE W 性で設定した値に変換さ 
れます0 VALUED 性を省略すると、項目名 （ OPTION 要素の内容）がそのまま送 
信されます。 



VALUE 属性の使用例 


<OPTION> 鎌田雅人 (keyboard) </OPTION> 
<OPTION> 岡本悄吾 (bass) </OPTION> 

〈OPTION selected 〉 吉田太郎 (drums) </OPTION 〉 
く / SELECT 〉 


く SELECT NAME*"favorite" SIZE="4" multiple 〉 

<OPTION>a 沼学 (vocal)</OPTION 〉 I^J VALUE 厲 性を設定し 

<OPTION>S 永治郎 (guitar) </OPTION> I ていない項目 _ 

<OPTION VALUE*"MK"> 鎌田雅人 (keyboard) </OPTION> 

<OPTION VALUE=”SO，> 岡本憤吾 (bass) </OPTION> _ 

<OPTION VALUE: "于¥_>吉田太郎 (drums) </OPTION>| 

く / SELECT 》 1VALUE 属性を設定した^目 1 
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HTML リファレンス 



□ Subject •: 


Date: Mon,10 Aug 1998 19:37:36 +0900 

From: Toshihisa Okihara く tokihar@heian.go.jp> 

X-Mailer: Hozilla 4.03 [ja] (Macintosh; I; PPC) 

To: nlciyohar@heian.go.jp 
Subject: ForiR posted fro* Mozilla 

Content-type: multipart バ ora-daia: boundary - 

24980151696692 
Content-Length: 275 

Message-ID: < 1309344700 -17320?888i«iail .heian.go. jp> 


Content-Dispo 811101 1 : fort-data 


2498015 
a; name* 


1696692 

-"favorite" 


宮永治郎 （ guitar ) 


Content-Diposition: fon-data 


2498015 
a; nane ： 


1696692 ■ 
■"favorite" 


VALUE 属性を設定していない 
と、項目名 （ OPTION 要素の内 
容）がそのまま送信される 



ENCTYPE="multipart/form-data” で送 ® されたメ 
























阅 ©I 
SH13I 


一般的なテキスト 
BODY 

HI H2 H3 H4 H5 H6 
ADDRESS 

P PRE DIV CENTER BLOCKQUOTE FORM CAP¬ 
TION TH TD DT DD LI 
TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET FONT 


TEXTAREA 要素は、フォームのテキスト入力欄の設定に使用します。必ず 
FORM 要素内に K かれます（テキストレベル要素なので直接的にはさまざまな要素 
内に f ? (くことができる）。 

開始タグ < TEXTAREA > と終了タグ</丁已乂丁八11£八> でマークアッブされた内 
容は、デフオルトで入力されるデータとなります。たとえば、記入例の表示などに 
使用します。 


<P> ご意見 . ご感想を頂ければ助かります。 </P> 

<FORM ACTION="mailto : nkiyohar@heian.go.jp" 
METHOD="POST" ENCTYPE="multipart/form-data"> 
<P> ^0 也の要索の中に B くことができる ) 

1< TEXTAREA[NAME="iken■ (R0WS»"4 w COLS«"50">^ - 

U 例）もう少し価格を下げてください j r</TEXTAREA>l<BR> 

< INPUT TYPE*"submit"_ALUE=" 送信 "> <INPUT TYPE: 
set" VALUE= " 取消 _> 

</P> ["入力例 (TEXTAREA 

</FORM> 要索の内容） 


テキスト 
入力欄の 
サイズ 


テキスト入力擱 (The TEXTAREA element) 


テキストレベル要素 


TEXTAREA <TEXTAREA>^</TEXTAREA> 
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2 章 HTMLII フアレンス 


□ 

- - - Netscape ： TEXTAREA 見本1 


- BB 

ザ 

• • . 

— • 

民る 次 み d みホ-ム mm ガイ！： 

JJn ]' 


ご意見-ご SS を頂ければ助かリます。 



P 


(例〉もう少“■格を下げてください。 

▲ 

▼ 









柳1 |取消| 





TEXTAREA 要索の使用例 


ras=a 

»NAME 



厲性は必須 


• ROWS 




■EEI 

KEB 

■a 

number 

テキスト入力欄の縦幅を行数で股定 


〇 

〇 


厲性は必須 


DHH 

働き 

H3 

N4 

■n 



〇 

〇 

〇 

參 WRAP (初期値： off ) 


属性は必須 

|値 


H3 

N4 

-Jfj 

soft 

( vittual ) 

ァキスト入力欄の幅に合わせて改行（画面上のみ） 


! 

! 

hard 

( physical ) 

テキスト入力欄の幅に合わせて改行（データも改行） 

一 

I 

! 

off 

改行なし 

一 

! 

! 


m;mber= 数値 /找/=_般的なテキスト 


属性は省略可 


2〇4 






















TEXTAREA 


參 NAME 属性 

データフィールド（テキスト入力欄）に名前を設定します 0 TEXTAREA 要素で 
は必須の域性です。 

フォームで送信されるデータは、基本的に「入力されたデータ」だけです0そこで 
NAME 城性を使用して、データフィールドに名前を設定し、一体何のデータであ 
るか判別できるようにします (INPUT 要素の NAME 属性参照 P. 188参照)。 

參 ROWS 属性 

テキスト入力欄の縦サイズを行数で設定します 0 TEXTAREA 要素では必須の 
属性です。 

なお、 Windows 版 Internet Explorer 3.0x では、設定した値と表示結果がう 
まく合わない場合があります。 

參 COLS 属性 

テキスト入力欄の横サイズを行数で設定します 0 TEXTAREA 要素では必須の 
诚性です。 

なお、 Windows 版 Internet Explorer 3.Ox では、設定した値と表示結果がう 
まく合わない場合があります。 

參 WRAP 属性 

テキスト入力欄内の改行方法を指定します0 

soft (または virtual) を指定した場合、テキストが入力欄の右端に達すると画面 
上では改行して表示されますが、実際に送信されるデータは改行されません。 

hard (または physical) を指定した場合、テキストが入力欄の右端に連すると画 
面上で改行して表示されるだけでなく、実際に送信されるデータも改行されます。 

off を指定した場合、テキストが入力欄の右端に達しても改行されず、実際に送 
信されるデータも改行されません。 

なお、 WRAP 属性はもともと Netscape Navigator の独自拡張でしたが、その 
後 Internet Explorer でも採用されました。そのせいもあって、 HTML 3.0 では審 
議の対象になりましたが、結局 HTML 3.2 や HTML 4.0 でも採用されていません。 
したがって、一般の HTML 文書では使用しない方か〜、いでしょう。 





<A>~</A> 


アンカー (The Anchor element) テキストレベル要素 


阅 ©► TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE 
INPUT SELECT TEXTAREA IMG APPLET FONT 
BASEF 〇 NT BR MAP SCRIPT 
一般的なテキスト 
■33 BODY 

HI H2 H3 H4 H5 H6 
ADDRESS 

P LI DT DD PRE DIV CENTER 
BLOCKQUOTE FORM CAPTION TH TD 
TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE 
APPLET FONT 


HTML 文#の®:大の特徴は、その名前の由来にもなっている「ハイパーテキスト 
リンク機能」です0このリンクとは、2つ（あるいはそれ以上の）ものを結びつける 
関係です。その関係を表現するためには、リンクの起点と目的地、リンクの関係 
(方向など）を示す3つの情報が必要です。もっとも、起点と目的地が判明してい 
れば、関係の情報はなくてもとりあえずリンクは成立します。このリンクの起点と 
目的地を「アンカー （anchor)」 と言います0また、特に起点側を「起点アンカー 
(source anchor)」、 目的地側を「目的地アンカー (destination anchor)」 とも言 
います。 




リンクとアンカーの基本関係 








起点アンカーは通常 HTML 文書の中の特定の部分に設定されます0また、目的 
地アンカーは目的地が WWW のリソース （HTML 文書や画像など）である場合、そ 
の URL となりますが、目的地が HTML 文書内の特定の部分である場合、目的地ア 
ンカーには別途名前がつけられます0 

A 要素は、 HTML 文#の特定の部分にこれらの「アンカー」を設定する要素です。 
開始タグ <A> と終了タ ゲく lk > によって、アンカーとして設定する内容をマークア 
ッブします。また、厲性によって「起点アンカー」か「目的地アンカー」、あるいはそ 
の両方にすることができます。 

なお、 A 要素はテキストレベル要素です0したがって、アンカーを設定できる内 
容は、テキストレベル要素と一般的なテキストのみです0ただし、 A 要素を入れ子 
にすることはできませんので、記述の際は注意してください0 


<P><A HREF= "http : / /www.pump-inc• com/">PUMP の Web サイ 

行く </Ax/P> 

<A HREF="http://www.pump-inc.com/"><P>PUMP の Web サイトへ 

行く </P></A> I x ブロックレベル要素であ 

る Pg 素は入れられない 




w^m 


• HREF 





■8 隱 

mm 

url 

リンク先リソースの URL 



O 


属性は省略可 



属性は省略可 


參 REL 


1 値 

働き 

H3 

N4 

mm 

link type 

順方向の 1 」ンク関係 

〇 

一 



属性は省略可 






2 章 HTML リファレンス 


• REV 


値 

働き 

H3 

N4 

14 I 

link type 

逆方向のリンク関係 

〇 

X 

X 


属性は省略可 


•TITLE 


|値 

働き 

H3 

N4 

14 

text 

リンク先リソースのタイトル 

〇 

X 

〇 


属性は省略可 


•TARGET 


1 1 

働き 

H 3 

N 4 

rn 

top 

別ウインドウを開いてリンク先を表示 

一 

1 

• 

! 

frame-target 

ターゲットにするフレーム名 

一 

! 

! 

_top 

フレーム枠を解除して U ンク先を表示 

一 

! 

1 


属性は省略可 




ur/=URL fex /= —般的なテキスト link /ype = 文字間の関係の種類 
nome= — 般的なテキスト（日本語使用不可大文字小文字の区別あり） 
frome-to の ef= — 般的なテキスト（先頭文字はアルフアベットのみ） 


- 

籲 HREF 属性 

HREF 属性を単独で使用すると、 A 要素の内容は起点アンカーとして機能します 0 
属性値にはリンク先のリソースの URL を指定します 0 値には、日本語は使用でき 
ません。また、大文字 • 小文字は区別されます。 

リンク先のリソースは、 HTML 文書に限りません。画像や動画、 PDF など 
WWW 上で利用可能な全てのデータを含みます。 

リンクが設定されたテキスト色は、 Web ブラウザに設定されているものが使用さ 
れますが、 HTML 文書の作者が BODY 要素の LINK 域性で指定することもできます 
(P.25 参照)。 


H リンク先 URL ( 目的地アンカー） 


2〇8 







A 要索の使用例 

また、値にメールの宛先を指定する 「mailto: メールアドレス」もよく利用されま 
す0この場合、リンクをクリックすると、 Web ブラウザのメールウインドウが開き 
ます（あるいは設定されているメールソフトが起動 >〇 メールウインドウの宛先欄に 
は、設定されたメールアドレスが自動的に入力されます0 


<P> ご意見 • ご感想を頂ければ助か ります。 <P> 

<ADDRESS> ▼ 


P ドレス 


<A HREF«£mailto:webmasterepump-inc.com")► PUMP inc. 
(webmaster@pump-inc.com) </A> 

</ADDRESS> 
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參 NAME 属性 

HTML 文書内の特定の部分に、目的地アンカーを設定する属性です0 NAME 属 
性を単独で使用すると、 A 要素の内容は目的地アンカーとして機能します0 

属性値には、目的地アンカーの「名前」を記述します0この名前には HREF 属性 
と同様、日本語は使用できません。大文字•小文字は区別されます。また、1つ 
の HTML 文書内に複数の目的地アンカーを設定する場合、それらは別々の名前で 
なければなりません0 

HTML 文軎内に設定された目的地アンカーにリンクを設定する場合は、起点ア 
ンカーの HREF 属性は、 「URL」 +「#」+「目的地アンカーの名前」の形式で記述し 
ます。ただし、同じ文畨内に目的地アンカーがある場合は URL を省略できます。 

HTM し文書内の目的地アンカーは特に色か文化したりはしないので、 Web ブラ 
ウザで表示しても見た目では判別できません。 


<H1> 6. 職員令民部省関連条文 </Hl: 
<P> 目次く / P> 

<0L> 


-<LIXA HREFa"[#6-lh> 民部省条く / A></LI> 


<LI><A HREF= "(#6-2>>*</A></LI2 


-<LIXA HREF=" l#6-3r _ > 主税果条く /A></LI> 

</0L> _ 

<HR> t 



目的地アンカーの名前 


►<H2><A NAME=-I6^l) , > 6-1. く / A> 民部省条 </ ぬ > 

<P> 卿一人。 <SMALL> 諸国の戸口の名籍、賦役、孝典、優復、けん [ 益 + 蜀 ] 
免、家人、奴牌、橋道、津済、渠池、山川、蔽沢、諸国の田の事を掌る。 
</31^1^> 大 _ 一人。少輔一人。大丞一人。少丞二人。大録一人。少録三人。 
史生 + 人。省掌二人。使部六十人。直丁四人。 </P> 


<H2xA NAME="16-2 卜〉 6-2. く / A> 主 — 計寮条 く / H2> 

<P> 頭一人。 <SMALL> 調及び雑物を計り納れ、国用を支度し、用度を勘勾す 
るを掌る。 </SMALL> 助一人。大充一人。少充二人。大属一人。少属一人。 
算師二人。 <SMALL> 調庸及び用度を勘計するを掌る。 く / SMALL>t 生六人 0 
使部廿人。直丁二人。 </P> 

•<H2><A NAME 
<P > 頭一人 


|6-3f~> 6-3. く / A> 主税果条く /H2> 

<SMALL> 倉廩、出納、諸国の田租、舂米、碾磑の寧を掌る。 
</SMALL> 助一人。大充一人。少充二人。大属一人。少属一人。算師二人。 

く SMALL 〉 租税を勘計するを掌る。 </SMALL>t 生四人。使部廿人。直丁二 

人。く / P> I 目的地アンカー ] 
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また、 NAME 域性と HREF 域性は同時に設定することもできます。その場合の 
A 要素は、目的地アンカーであると同時に起点アンカーとしても機能します0 


<H1>6. 職貝令民部省関連条文 </Hl> 

<P><A NAME»"mokuji"> g 次 </A></P> 

<0L> 

<LIXA HREF«"#6-1"> 民部雀条 </ 入 ></1|1> 

<LI><A HREF=_#6-2_> 主計寮 *</A></LI> 

<LI><A HREF»_#6-3"> 主税寮条 </A></LI> 

</0L> 

<HR> 

<H2><A NAME 囂 HREF=-#mokuji"> 6-1. </A > 民部省条 
</H2> 

( 以下略） 











1 章 HTMLU フアレンス 


□ ^7 

. 

= Nstscope: A 見本 4* 


HB 


次 

員 みホ- A M ガイ F 


プリント t キ J 2 


6. 職員令民部省関連条文 


目次 

^i. 民部省粂 

2 . 主計察条 

3 . 主税眾条 


▼ 

-6-1. 民部省条 

卿一人 0 U 困の戸□の名》、 Wfft . 孝英、 ff 價、けん[益 + C ] 免、求人、奴 tt 、 ttii、 漳 
58. 填':也、山 PL mR . の田の事を辛る.穴 «— 人。少«—人。大丞一人 。少也二 
人。穴綠一人。少錄三人。史生十人。省笨二人。後部六十人。 S 丁四人。 


ページ内リンクの使用例2 


さらに、別の HTML 文#内に設定された目的地アンカーにリンクを設定する坳 
合は、 HREFi*4 性の値に HTML 文齊自体の目的地アンカーに続けて「#」記号と目 
的地アンカーの「名前」を記述します0 


<H1><A HREFs"shikiin_index.html#taminotsukasa"> 6 . 

</A> 職貝令民部省関連条文 </Hl> 

(以下略） 


なお、 A 要素は屈性が異なっていても入れ子にすることはできません〇 


<H2> 

<A NAME="6-1"> 6-1.<J 
民部省 </ 九>条 </ 及> i 

</H2> A 

\ HREF="yougo. html#teuninotsukasa N > 

(A 要索は入れ子にできない 1 



春 REL 属性 

元の文書（起点アンカーを設定した文害）と HREF 属性で設定したリンク先文書 
との関係を、元の文書を基準に定義する属性です。 

たとえば、リンク先文書を「次の文書 （REL="next")J と定義し、 Web ブラウザ 
にバックグラウンドでリンク先文書にアクセスさせ（いわゆるデータの先読み）、表 
示時間の短縮を図るような使い方が想定できます。ただし、現在のところこの属性 
をサボートする Web ブラウザはないようです。 
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A 


籲 REV 属性 

元の文害（起点アンカーを設定した文書）と、 HREF 属性で設定したリンク先文 
書との関係を、 REL 属性とは反対にリンク先文書を基準に定義する属性です。 
REL 属性と同様、現在のところこの属性をサボートする Web ブラウザはないよう 
です。 

•TTTLE 属性 

HREF 厲性で設定したリンク先リソースのタイトル（情報）を設定しますが、実 
際の表現方法に関しては、 Web ブラウザに任されています。 

たとえば 、 Internet Explorer 4. Ox では、アンカー部分へマウスポインタを移 
動させた場合に、吹き出しで TITLE 域性の値を表示させます（将来的にはこの悄 
報を音声出力する Web ブラウザも出てくるでしょう）。また、 Lynx のように 
HTML 文#以外のリソース（生のテキスト文#など）へリンクした場合、この城性 
の値をリソースのタイトルとして使用する Web ブラウザもあります 0 あるいは 
「 mailto : メールアドレス」を設定した場合に、自動的にメールのタイトルに入力さ 
せるように使用されることがあります。 


<P><A HREF="HTML32_DTD.txt" TITLE="HTML 3.2 DTD" > HTML 
3.2 0DTD</A></P> 



リンク 


3 

2 











2 章 HTMLU フアレンス 



W3C Document Type Definition for the HyperText Markup 
version 3.2 as ratified by a vote of H3C member companies. 
For »ore inforncition on W3C look at URL http: //«w»w .w3.org/ 


r»olion 

January 


Date: Tuesday January 14th 199? 
Author: Dave Raggett <dsr^»3 org> 


TITLE 厲性の値が画面 
の右上に表示させる 


HTML 3.2 ai«s to capture recommended practice as of earlg 96 
and as such to be us«d as a replacement for HTML 2.0 (RFC 1866). 

Widely deployed rendering attributes ar« included they 

hav« b«ttn shown to be inlctrop«rabl«. SCRIPT and STYLE are 
included to saooth the introduction of cli*nt-sid« scripts 
and slgltt sheets. Browsers must avoid showing the contents 
of th«s® «le<n«nt Oth«rvis« support for th«ai is not roqui r«d 
ID, CLASS ortd STVLE attributes ar« r»ot included in this v«r#ion 
of HTML. 

Lynx でリンク先のリソースが生のテキスト文書の場合の表示例 


•TARGET 属性 

フレーム機能を使用する場合のウインドウの表示方法などを定義します （ P .261 
参照)。 
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IMG 要素は、 HTML 文#内に画像を表/下する場合に使用します。といっても、 
HTML 文搛自体はテキストファイルなので直接画像を含めることはできません〇そ 
こで、 IMG 要素には本物の画像データの URL を記すための SRCK 性が用意されて 
おり、 HTML 文#を表示する Web ブラウザは、その値に基づいて画像データを入 
手し、ウインドウに表示します（あるいは、代替テキストを表示したり、音声出力 
したりします)。 

また、 IMG 要素はテキストレベル要素なので、ブロックレベル要素やテキストレ 
ペル要素、あるいは一的なテキストの中に置くことか〃できます0 

なお、 IMG 要素は開始タグ < IMG > のみでマークアップされる、いわゆる空の要 
素です。終了タグは省略ではなく、もともと存在しません。 

ras=a - 

• SRC 


画像 (inline IMaGes) 


テキストレベル要素 


H3 N4 14 


text _代替テキスト _〇_ 〇 _〇_ 

属性は省略可（できるだけ有効に使用してください) 



表示する画像の URL 


阅空 
01113 ► BODY 

HI H2 H3 H4 H5 H6 
ADDRESS 

P DIV CENTER BLOCKQUOTE FORM CAPTION 
TH TD DT DD LI 

TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET FONT 


IMG 


< IMG > (转 T タグなし) 


■マルチメ 








2 章 HTML リファレンス 


•ALIGN (初期値： bottom) 



ソ TVJIIS • ■ノ 

■BM 


mm 

top 

テキスト行上端に画像の」 

ヒ端を揃えて配匾 

〇 

/^\ 

〇 

r \ 

〇 

r \ 

middle 

bottom 

丁千スト订卜■に 幽塚の A 

テキスト行下端に画像の 1 

P 天を搁;^ CKIB 

「端を揃えて配置 

CJ 

〇 

U 

〇 

u 

〇 

left 

テキスト行の左繃に画像を 5 

匾し、回り込みを設定 

〇 

〇 

〇 

right 

テキスト行の右端に画像を 5 

匾し、回り込みを設定 

〇 

〇 

〇 

texttop 

同一行内のテキストの上端に揃える 

一 

! 

一 

absmiddle 

同一行内の最大の画像の中央に揃える 

一 

! 

— 

baseline 

テキストを下付き表示 

一 

! 

一 

absbottom 

同一行内の最大の画像の下端に揃える 

一 

j 

一 


属性は省略可 


參 W 旧 TH 




|値 働き 

H3 

N4 

■31 

pixels 画像の横描 

〇 

〇 

〇 


属性は省略可 


• HEIGHT 


「値 

H3 

N4 

rn 

pixels 画像の高さ 

〇 

〇 

〇 


属性は省略可 


•BORDER 


I 値 

働き 

H3 

N4 

14 

pixels 

リンク股定時の枠線の幅 

〇 

〇 

〇 


属性は省略可 


•HSPACE 


1値 

働き 

H3 

N4 

— J 4 」 

pixels 

画像の左右の余白 

〇 

〇 

〇 


尿性は省略可 


•VSPACE 


1値 

働き 

H3 

N4 

14 J 

pixels 

画像の上下の余白 

〇 

〇 

〇 


属性は省略可 
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働き 

H3 


url#map 

クライアントサイド • イメージマップの設定 

〇 

〇 〇 




属性は省略可 

• ISMAP 

(論理型） 





厲性は省略可 


• START 


値 


働き 


H3 N4 


fileopen 

ファイルが開かれると同時に再生開始 

一 

一 


mouseover 

マウスが移動すると同時に再生開始 

一 

一 




厲性は省略可 


• CONTROLS (論理型） 



働き 

H3 



controls 

動画のコント□ールパー表示 

一 

一 1 


• LOOP 



厲性は省略可 


値 


14 


number 

動画再生の繰り返し回数 

一 

一 



動画再生を無限に繰り返す 


属性は省略可 


ILOOPDELAY 


値 


number 


働き 


H3 


N4 


14 


ber 動画再生の繰り返し間隔 - - ! 

属性は省略可 

Uf/=URL texf = —般的なテキスト p,xe/s= pixel 85 

mop = イメージマップ名（一般的なテキスト） m；mber = 数値 





















•a じ r 属性 

主に画像を直接表示することができない Web ブラウザや音声出カアブリケーシヨ 
ンのために、代替テキストを設定する属性です 0 また、画像表示ができる Web ブ 
ラウザでも、吹き出しなどで表示可能なものもありますし、あるいは画像表示機能 
をオフにしている場合には ALT 城性の値が表示されます。 

HTML 3.2 では必須の诚性ではありませんが、さまざまな利用方法がありますの 
で、できるだけ有効に使用してください。 


<IMG SRC =" kiseki . jpg - ALT » ■ここには「奇跡の人」の表紙画像があ 
ります ■> 

※SRC • ALT 厲性以外の属性は省略 



IMG 要素の使用例 
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リンクを記述してあるので別途画像の取得が可能 

ただし、 HTML 文書の内容によっては、無理に ALT 属性の値を表示させない方 
がいい場合もあります0たとえば、単なる飾りのためのイラストなどは ALT 属性で 
くどくど説明されても、かえって困ります。そのような場合は、 ALT 属性を省略す 
るのではなく、画像が'^在すること自体がわからないように空の値を設定します。 




画像データへのリンクが設定されていれば、 
必要な人は受信して他のアプリケーシヨンで 
表示させることができる。 


<A HREF="kiseki.jpg"> 

<IMG SRC="kiseki.jpg" ALT=" 「奇跡の人 J の表紙画像 （ JPEG 、 約 
30KB)"> 

</A> 

※弓闩〇 • ALT 属性以外の属性は省略 


Lynx での表爪例 

また、画像を表示できない Web ブラウザでも、画像のデータを受信して別のアブ 
リケーシヨンで表示することか可能な場合もあります。そのため、重要な画像や是 
非見てもらいたい画像は、 ALT 属性の使用と同時に、画像データへのリンクを設 
定しておくといいでしよう。 


ALT 属性の値が代替テキスト 
として表示される 


マルチメティア 














HTML リファレンス 


<IMG SRC="logo2.gif ALT=-"> 


※日闩〇 • ALT 属性以外の属性は省略 


IMG 見本4 


ALT 属性に空の値を入れておけ 
ば、画面上には何も現れない 


ALT 厲性に空の値を股定した例 

あるいは、行頭などに飾りとして、またはリンク用のボタンとして使用している 
画像なども、無理に説明を入れず、適当な代替記号を設定するといいでしょう。 

j -1画像と似た代 替記号 1 

<IMG SRC«"button.gif■ ALT* ■ 琴 "><B>water</B> Official 
Fan Club ーウォーターべッドー 

«SRC • ALT 属性以外の厲性は省略 




IN 


Netscape Navigator での表示例 


I Menu 


IMG 見本5 


water Official Fan Club ーウォ〜夕 —• 


Lynx での表示例 























IMG 


鲁 ALIGN 属性 

画像と画像が含まれるテキスト行との位置関係を設定します。ただし、 Web ブ 
ラウザや表示フォントによっては、表現結果が微妙に異なる場合があります0 
属性値 top 、 middle 、 bottom は、テキスト行に対して画像を揃える位置を設 
定します。また、 ALIGN 属性を省略すると、初期値として bottom が使用されま 

す。 


<P> 属性値が rtopj の場合の位置関係は <IMG SRC="uma2. jpg" 

ALIGN*"top"> こうなります。く / P> 

<P> 属性値が 「 middle 」 の場合の位置関係は <IMG SRC»"uma2. jpg" 
ALIGN:"middle"> こうなります。 </P> 

<P> 属性値が 「 bottom 」 の場合の位置関係は <IMG SRC="uxna2.jpg" 
ALIGN:"bottom ”〉 こうなります。 </P> 

※SRC • ALIGN 厲性以外の厲性は省略。 



属性値 left と right は、テキスト行の中での画像の配置位置（左右）を設定します。 
また、同時に画像に対するテキストの回り込みか激定されます。このテキストの回 
り込みは、画像を含む要素内だけでなく、続く別の要素にも有効となります。 



マ 

ル 

チ 

メ 

■C 


ァ 
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<P><IMG SRC="kiseki.jpg" ALIGN= "right"><B> 「奇跡の人」 
water (TOCT-10271) </Bx/P> 

<P> コイツは、手がつけられない！！ <BR> 

全曲シングルかと思わせるクオリティ。 <BR> 

他のバンドとはひとまわり違うスケール 0 <BR> 

R&amp;B をベースにした実力派ブリットボップバンド water の 1st アルバ 
ム〇 </P> 

«SRC • ALIGN 厲性以外の厲性は省略 



属性値 " right" の指定例 


なお、诚性値 texttop 、 absmiddle 、 baseline 、 absbottom は、同じ行内に 
複数の画像がある場合の整列を設定します 0 ただし 、 Netscape Navigator の独 
自拡張なので、一般の HTML 文#では使用しない方がいいでしょう。 

•W 旧 TH 属性 

HEIGHT 属性と対になって、表示する画像の横幅を pixel 数で設定します。ま 
た、原寸より大きい、あるいは小さい値を設定することもできます0その場合、画 
像は設定された値に合わせて拡大•縮小表示されます。ただ、 Web ブラウザに余 
計な処理をさせることになりますので、原寸以外の設定はあまりおすすめできません。 

属性を省略すると、画像は原寸（画像データカ偫っている pixel 数）で表示されま 
す0必須の属性ではないため、一見不要な属性にも思われがちですが、この属性が 
あると Web ブラウザは画像データを受信する前に、画像の表示サイズを把握できる 


222 




IMG 


ため、先に表示領域を確保し、他のテキストなどの表示を開始することができます0 
反対にこの属性がないと、 Web ブラウザは画像データをある程度受信するまで確保 
すべき表示領域が把握できないため、それだけ表示が遅くなります。また、画像表 
示機能をオフにしている場合、画像の表示領域が確保できないため、表示が大きく 
乱れる可能性もあります。 

• HEIGHT 属性 

WIDTH 展性と対になって、表示する画像の离さを pixel 数で設定します。 

① 一 ►<IMG SRC="jdml.gif" WIDTH="240" HEIGHT=”170"> 

② 一 ►<IMG SRC="jdml.gif"> 


«SRC • WIDTH - HEIGHT 厲性以外の厲性は省略 





WIDTH - HEIGHT 属性の指定例 


























HTML リファレンス 


WIDTH - HEIGHT 属性が未 
設定なので画像領域が確保さ 
れない 

—— -~~ 1 _ -iatk ^ \C^\ 今 

画像表示梅能をオフにした場合の表示例 


没 




WIDTH ■ HEIGHT 厲性を設 
定しているので画像領域が確 
保される 


• BORDER 属性 

IMG 要索をリンク（起点アンカー）の一部、または全部に設定した場合、画像の 
周囲に色付きの枠線が表示されます 0 BORDER 诚性はこの枠線の太さを pixel 数 
で設定する铖性です。 


く A HREF»"http: / /www.pump-inc.com/waterbed/index.html"> 
<IMG SRC="logo_new.gif" B0RDER*_2"></A> 属性値が 「 2J の場 

合の枠線。 

<A HREF="http: / /www.pump-inc.com/waterbed/index•html_> 
<IMG SRC="logo_new.gif" B0RDER«-4-></A> 属性値が「 4 J の埸 

合の枠線。 

«SRC • BORDER 属性以外の!*性は省略 
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IMG 


また、 BORDER ="0" を設定すると枠線は非表不になりますが、•般的にはマウ 
スポインタの形状などが变化するので、リンクか激定されていることは把握できま 
す0しかし、テキストブラウザや音声出カアブリケーシヨンのことも考慮して、や 
はり ALT 厲性にその旨を言己しておくことを強くおすすめします。 


※日扣 • BORDER • ALT 厲性以外の厲性は省略 


j IMG 見本 10 - Microsoft Internet Explorer 画 OE 3 


ノ K £) 禰集® 表,〒V) お W こ入り⑷へル d 



マウスポインタを形状変化させるだけでなく、 
ALT 属性の内容を吹き出しで表示できるので、 
枠線がなくてもノ V イパーテキストリンクが設 
定されていることが明確にわかる。 ALT 厲性 
が役立つのはテキストブラウザだけではない 


Windows 版 Internet Explorer での表示例 


• HSPACE 属性 

画像の左右に余白を pixel 数で設定します。属性を省略すると、0以外の最小 
値が 15：定されます（具体的な値は Web ブラウザによって異なる)。 


<P> 属性値が「 0 」の場合の余白は <IMG SRC= "\una2.jpg" HSPACE= 
■()■> こうなります 0 </P> 

<P> 属性値が「 40 」の場合の余白は <IMG SRC="uma2.jpg" HSPACE: 
"40”> こうなります 0 </P> 


※SRC • HSPACE 属性以外の属性は省略 


<A HREF="http: / /www.pump-inc.com/waterbed/index•html"> 
<IMG SRC="logo_new.gif" BORDER=’0_ ALT=" 「waterbedj へ 

のリンクボタン " > 

</A> 












2 章 HTML リファレンス 


□ Z 

—■ ■■- 

^ Netscape ： IMG 見本11画 

■ — -■ — ^ 

BE 

蓋民る 

次 

霣25み込みホ -a mm ガイド 


プリントセキ [3 


属性値がの埸合の余白は I ^ I こうな9ます0 


k 


属性値が 「40 j の堆含の余白 (L 


t 


_こラなります< 


.-：■ : ■： - —i 40 pixel の余白ができる 

_l 

ctfL , _ . r 



Netscape Navigator での表示例 


•VSPACE 属性 

画像の上下に余白を pixel 数で設定します。诚性を省略すると、0以外の股小 
値か IS 定されます（具体的な値は Web ブラウザによって異なる)。 

• USEMAP 属性 

クライアントサイド.イメージマップ ( P .229 参照）を使用する場合、イメージマ 
ッブの名前を指定します。 

• ISMAP 属性 

サーバサイド • イメージマップを使用するときに使用されます。城性名は省略し 
诚性値 RsmapJ のみを記述します。 

現在ではほとんどの Web ブラウザがクライアントサイド.イメージマップに対応 
していること、あるいはテキストブラウザや音声出カアブリケーシヨンで利用しが 
たいことなどから、使用する機会はあまりないでしょう。 

參 DYNSRC 属性 

AVI 形式の動画や VRML を表示する際に用いられます。 

Internet Explorer の独自拡張なので、一般の HTML 文書では使用しない方が 
いいでしよう。 
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參 START 属性 

DYNSRC 属性で表示される動画の再生開始方法を指定します。 
fileopen はファイルのオーブンと同時に再生が開始されます 0 mouseover はマ 
ウスカーソルが動画上に移動したときに再生が開始されます。 

Internet Explorer の独自拡張なので、一般の HTML 文書では使用しない方が 
いいでしよう。 

•CONTROLS 属性 

DYNSRC 属性で表示される動画にコントロー ルバーを付加します。 

Internet Explorer の独自拡張なので、一般の HTML 文寄では使用しない方が 
いいでしよう。 

• LOOP 属性 

DYNSRC 诫性で表示される動_の再生を繰り返す回数を設定します。また 、 in 
finite か -1 を設定すると、無限に繰り返します。 

Internet Explorer の独 A 拡張なので、一般の HTML 文遊では使用しない方が 
いいでしよう。 

• LOOPDELAY 属性 

LOOP 诚性を設定した場合の再生を繰り返す間隔を設定します。 

Internet Explorer の独自拡張なので、-般の HTML 文齊では使用しない方が 
いいでしよう。 







ilil 


MAP <MAP>~</MAP> 


クライアントサイド•イメージマッブ （ Client-side image MAPs ) テキストレベル要素 


向 ©► AREA 

※1個以上 
01133 ► BODY 


HI H2 H3 H4 H5 H6 
ADDRESS 

P DIV CENTER BLOCKQUOTE FORM CAPTION 
TH TD DT DD LI 

TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET FONT 


，素逛概要 


MAP 要素は、クライアントサイド • イメージマップ機能を実現するための要素で 
す。 

かつて「イメージマップ」、つまり1枚の_像内に複数のリンクを設定するために 
は、サーバサイド•イメージマップを使用していました0しかし、サーバ側で CGI 
スクリプトを動作させなければならないことや、テキストブラウザや音声出カアブ 
リケーシヨンでの利用が不可能という問題がありました。 

一方、クライアントサイド • イメージマップはその名の通り、 Web ブラウザ側だ 
けでイメージマップ機能を実現するものです。現在ではほとんどの Web ブラウザや 
アブリケー シヨ ンが対応していますので、比較的容易にイメージマッブを使用でき 
るようになりました。 

開始タグ<\1八卩> と終了タグ</1^1八卩> によって、具体的なイメージマップの範囲 
をマークアップします0また、その内容としては AREA 要素のみを置くことができ 
ます。 

なお、 MAP 要素はテキストレベル要素なので、ブロックレベル要素やテキストレ 
ベル要素、あるいは一般的なテキストの中に置くことができます。 
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MAP 




• NAME 


1値 働き 

H 3 

N 4 

14 | 

map イメージマップの名前 

〇 

〇 

〇 


属性は必須 


S3 


mop = イメージマップ名（一般的なテキスト) 


• NAME 属性 

IMG 要素の USEMAP 诚性で設定したクライアントサイド • イメージマップの名 
前を設定し、 IMG 要素と MAP 要素を関連づけます（実際の表示に使用する画像デ 
一夕の URL は、 IMG 要素の SRC 诚性で設定)。 MAP 要素必須の诚性です。 


<IMG SRC="cd_index.gif” USEMAP=" < Hcd_indexf > 

<MAP NAME«"§d index}t> - 1 

<AREA SHAPES"rect" COORDS="20,160,220,210” HREF= 
"single.html"> 

<AREA SHAPE="rect" COORDS*"330 # 240, 510,340" 
HREF="cd.html"> 

</MAP> 


*SRC • USEMAP • NAME 厲性以外の厲性は省略 





關關 

AREA <AREA> (終了タグなし） 


クライアントサイド • イメージマップ （ Client-side image map AREA ) テキストレベル要素 


向©►-空 

MAP 




AREA 要素は、クライアントサイド • イメージマップを使用する際に必要な座標 
系データやリンク、代替テキストの設定のために使用する要素です0また、必ず 
MAP 要素の中に置かれます。 

なお、 AREA 要素は開始タグ < AREA > のみでマークアップされる、いわゆる空 
の要素です。終了タグは省略ではなく、もともと存在しません。 


ms=a- 


•SHAPE (初期値： rect) 


^ WI ■ハ丨 L 

fli き 

H 3 

N 4 


rect 

起点アンカーとなる領域を四角形に股定 

〇 

〇 

〇 

circle 

起点アンカーとなる領域を円形に設定 

〇 

〇 

〇 

poly 

起点アンカーとなる領域を多角形に股定 

〇 

〇 

〇 


厲性は省略可 


Ik 

働き 

H 3 

N 4 


length 

起点アンカーとなる領域の座標データ 

〇 

〇 

〇 

• HREF 



厲性は省略可 

■値 

働き 

H 3 

N 4 

14 | 

url 

リンク先リソースの URL 

〇 

〇 

〇 




属性は省略可 

• NOHREF (論理型） 




| 値 

働き 

H 3 

N 4 

14 1 

nohref 

リンクを無効に設定する 

〇 

〇 

〇 


属性は省略可 
















AREA 


•ALT 


1値 働き 

H 3 

N 4 


text 代替テキスト 

〇 

〇 

〇 


属性は必須 


mm 


/ eng //) = pixel 数、または％ 


url= URL = —般的なテキスト 


• SHAPE 属性 

ハイパーテキストリンクの起点アンカーとなる領域の形状を設定します0铋性値 
rect は四角形、 circle は円形、 poly は多角形です。また、域性を省略した場合は 
rect が使用されます。 



•COORDS 属性 

SHAPE ¢4性で指定された形状に基づいて、実際の起点アンカー領域を pixel 単 
位、または画像の横幅•离さに対する割合（％単位）の座標で設定します。また、 
座標の原点はイメージマップに使用される画像の左上になります0 
SHAPE = " rect " の場合は四角形の左上と右下の2ヶ所 、 SHAPE = " cilcle " の場 
合は円の中心点と半径、 SHAPE =" poly " の場合は多角形の左上から反時計回りに 
各頂点の座標を記述します。 


く AREA SHAPE="rect" COORDS="20, 20,50,40"> 

<AREA SHAPE=”circle" COORDS="70,60,15"> 

<AREA SHAPE= n poly" COORDS="90,5,85,30,95,40, 

105,30,100, 5"> 

※SHAPE • COORDS 属性以外の属性は省略 
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2 章 HTMLU フアレンス 


原点 （0.0): 20 50 70 85 90 95100105110 



が重なり合った場合は、先に設定された領域か节効になります。たとえば、上記の 
図で行の骹後に圃像全体を COORDS W 性で設定すると、残りの場所に領域が指定 
できます。 


<AREA SHAPE*"rect" COORDS=”20, 20,50,40"> 

<AREA SHAPE="circle" COORDS*"70,60,15"> 

<AREA SHAPE="poly" COORDS="90,5,85,30,95,40,105,30, 

100 ,5"> 

<AREA SHAPE="rect" COORDS="0,0, 110, 90"> 

« SHAPE • COORDS 属性以外の厲性は省略 


座標による領域設定は結構面倒なのですが、簡単に領域設定できるユーティリテ 
イがオンライン上で入手できます0 


◊ImageMapper (Mac OS 用） 

作者： Stuart Snaddon 氏(日本語化 : Bridge 1 Software) 

価格：1，000円 一 _ 

入手先： http://www.bridgel.com/ 

http: / /www.vector.co.jp/ fe 


2 3 2 b 














AREA 


0 Mapedit (Windows 用） 

作者： Boutell.Com，Inc. 

価格： $25 

入手先： http://www.boutell.com/mapedit/ 一 」^ 一 

籲 HREF 属性 

COORDS 诚性で設定された起点アンカー領域のリンク先リソースの URL を設定 
します。 


<P ALIGN="center"> 

<IMG SRC=-cd_index.gif" USEMAP*"#cd_index" 

BORDER="0"> 

<MAP NAME=-cd_index"> 

<AREA SHAPE*"rect" COORDS*_20,160,220,210" HREF= 

"single.html"> 

<AREA SHAPE="rect" COORDS="330 r 240,510, 340" 
HREF="cd.html"> 

</MAP> 

</P> 

※SHAPE • COORDS • HREF 厲性以外の厲性は省略 



AREA 要索の使用例 




















2 章 HTML リファレンス 
•NOHREF 属性 

NOHREF 属性を指定することによって、 COORDS 属性で設定された領域のリ 
ンク機能を無効にすることができます。先に設定された領域の中に、一部リンク無 
効の領域を設定する場合などに使用されます（たとえば、ドーナツリング状の領域 
の設定)〇 NOHREF 属性を指定する場合は、诚性名は省略し城性値 「nohref」 の 
みを記述します （P.8 参照)。 

籲 ALT 属性 

HREF 屈性で設定されたリンクの内容を知らせるための诚性です。 AREA 要素 
では、必須の属性です。 

現在では、 Lynx などテキストブラウザもクライアントサイド • イメージマップを 
使用できます。もちろん、イメージマップ（画像）そのものは表示できませんが、 
HREFW 性の値を表示し、リンクとして使用することができるのです。ただ、 
HREF 域性の値が生のまま表示されても、具体的にそのデータが何であるかは把握 
できないことが多いでしよう0そこで、 ALT 诚性を設定し、 HREF 城性値の代替 
テキストとして表示させるのです。 


<P ALIGN*"center"> 

<IMG SRC="cd_index.gif” USEMAP="#cd_index" BORDER="0" 
ALT=""> 


<MAP NAME="cd_index"> 

<AREA SHAPE="rect" COORDS=”20,160,220,210" HREF= 
"single.html" ALT="CD-Single JACKET■> 

<AHEA SHAPE="rect" COORDS=”330,240,510,340" 


HREF=" 

</MAP> 


cd . html " ALT="CD JACKET "> 


</P> 




□ x 




AREA 見本2 






クライアントサイドイメージ 
マツ ブがあると代替画面への 
リンクが表示される 


Lynx での表示例 


2 34 







AREA 



Web ブラウザやアプリケーション（携帯端末用のものなど）の中には、クラ 
イアントサイド • イメージマップを全くサボートしていないものもあります0 
その場合は、 ALT 属性も意味をなしません。そのため、イメージマップ以外 
に、別途リンクを用意しておくことも必要です。 


<P ALIGN="center"> 

<IMG SRC="cd_index.gif" USEMAP=-#cd—index" BORDER=-0" 
ALT=""> 

<MAP NAME="cd—index"> 

<AREA SHAPE="rect" COORDS="20,160,220,210" HREF* 
"single.html" ALT="CD-Single JACKET"> 

く AREA SHAPE="rect" COORDS=_330,240,510, 340" 
HREF="cd.html" ALT*"CD JACKET"> 


</MAP> 

</P> 


イメージマップの代替 
芝ータ 


<P ALIGN="center"> 

<A HREF="single.html"> [CD-Single JACKET] </A> 
<A HREF="cd.html"> [CD JACKET] </A> 

</P> 
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APPLET 


<APPLET>-</APPLET> 


Java Applet (Java APPLETS) 


向 PARAM 

TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE 
INPUT SELECT TEXTAREA A IMG APPLET FONT 
BASEFONT BR MAP SCRIPT 


一般的なテキスト 
0113 ► BODY 

HI H2 H3 H4 H5 H6 ADDRESS 
P DIV CENTER BLOCKQUOTE FORM CAPTION 
TH TD DT DD LI 

TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET FONT 


APPLET 要素は、 HTML 文#内で Java Applet を実行させるための要素です。 
実行させる Java Applet や条件は各楝诚性で設定します。また、開始タグ <AP 
PLET> と終了夕 ^</APPLET> によって、 Java Applet の実行に必要なパラメー 
夕である PARAM 要素や Java Applet 未対応の Web ブラウザで表示すべき代替テ 
キストをマークアップします0 

なお、 APPLET 要素はテキストレベル要素なので、ブロックレベル要素やテキス 
トレべル要素、あるいは一般的なテキストの中に既くことができます0また、 Java 
に間しては別途専門の解説押をご覧ください。 

ras=a - 


•CODEBASE (初期値：当該 HTML 文書の基準 URL) 


値 

働き 


N4 

14 

url 

Java Applet の基準 URL 

〇 

〇 

〇 


属性は省略可 






APPLET 


Mi 

働き 

H3 

N4 

14 1 

pixels 

Java Applet の初期表示の高さ 

〇 

〇 

〇 


•CODE 


1値 

働き 

H3 

N4 14 [ 

code 

JavaApplet のクラスファイル名 

〇 

〇 〇 




厲性は必須 

•ALT 

値 

働き 

H3 

N4 14 1 

text 

代替テキスト 

〇 

一 - 




厲性は省略可 

• NAME 

値 

働き 

H3 

N4 14 

text 

受信後の Java Applet に名前を設定 

〇 

〇 1 〇 




厲性は省略可 

•WIDTH 

| 値 

働き 

H3 

N4 14 

pixels 

Java Applet の初期表示の横桶 

〇 

〇 〇 


厲性は必須 


► HEIGHT 


厲性は必須 


•ALIGN (初期値： bottom) 




H3 

N4 


top 

テキスト行上端に Java Applet の 
上端を揃えて E 釅 

〇 

〇 

〇 

middle 

テキスト行下端に Java Applet の 
中央を揃えて配匾 

〇 

〇 

〇 

bottom 

テキスト行下端に Java Applet の 
下端を揃えて配臛 

〇 

〇 

〇 

left 

テキスト行の左端に Java Applet を 
配匱し、回り込みを設定 

〇 

〇 

〇 

right 

テキスト行の右端に Java Applet を 
配匾し、回り込みを設定 

〇 

〇 

〇 


属性は省略可 


マルチメディア 


3 















2 章 HTMUJ フアレンス 
• HSPACE 


1 値 

働き 

H3 

N4 

14 | 

pixels 

Java Applet 表示領域の左右の余白 

■〇 

〇 

〇 


属性は省略可 


•VSPACE 


1 値 

_き 

H3 

N4 

14 I 

pixels 

Java Applet 表示領域の上下の余白 

〇 

〇 

〇 


属性は省略可 

ur/=URL code = クラスファイル名（一般的なテキスト） 
p/xe/ S = 数値 /ex/ =—般的なテキスト 


mmm - 

• CODEBASE 属性 

Java Applet が爵•かれている URL を設定します 0 

属性を省略した場合は、当該 HTML 文宵の基準 URI (BASE 要素）が使用されま 
す（基準 URL か 15：定されていない場合は、当該 HTML 文辟の URL が使用される)。 

• CODE 属性 

実行させる Java Applet のクラスファイルを指定します 0 


<APPLET CODE»"cat.class" WIDTH-"200" HEIGHT="200"> 

猫か/歩き回る Java Applet アニメーション 

</APPLET> 
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APPLET 



Java Applet 対応 Web ブラウザでの表示例 


也—: 


死本 1 

亡上ニニ0 F 

r ： 民 i _ 

m ホ -a «mi 

ガイ！： i£(9 



描が步き回る Java Applet アニメ '■シ■ン 


APPLET 要索の内容が、代替テキス 
卜として表示される。 Lynx などテキ 
ストブラウプでも同様に表示される 


Java Applet 対応 Web ブラウザで Java 機能をオフにした壩合の表示例 


•ALT 属性 

ALT 属性の値は、 Web ブラウザなどのアプリケーションが APPLET 要素を認識 
できても 、 Java Applet を実行できない場合に表示される代替テキストです。一般 
的な Web ブラウザは Java 機能に未対応であっても、あるいは機能をオフにしてい 
てもこの属性を無視するようですが、 Lynx では値が表示されます。 

なお 、 Java Applet をアクセサリー程度に使用するだけなら代替テキストを記述 
するだけでいいのですが、リンクボタンなど Web ページの制御用に使用する場合な 
どは、別途 Java Applet 不要のページも用意しなければなりません。 




















2 章 HTML リファレンス 


<p> 

<APPLET CODE="cat.Class" WIDTH="200" HEIGHT="200" 
ALT=" 【猫が歩き回る Java Applet アニメーション】 "><BR> 

このページは Java Applet を使用しておりますが 、 <A HREF= 

"main.njava.html-> 非使用のページも別途用意しております 0 </ A > ど 
うぞご利用ください。 

</APPLET> 

</P> 




• NAME 属性 

Web ブラウザなどが Java Applet を受信し、 Web ページ上で実行する際に使用 
する名前を設定します 0 同じ HTML 文#内で複数の Java Applet を動作させ、そ 
れらがデータのやり取りをする場合、この名前でお互いを認識します。 
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•W 旧 TH 属性 

Java Applet が最初に実行される際の領域の横幅を pixel 数で設定します 0 IMG 



















APPLET 


要素などと異なり、省略することはできません。 

なお 、 Java Applet が実行されることによって開くウインドウやダイアログボッ 
クスなどの大きさはこの設定に影製されません0 

癱 HEIGHT 属性 

Java Applet が般初に実行される際の領域の高さを pixel 数で設定します〇 IMG 
要素などと異なり、省略することはできません。 

なお 、 Java Applet か*実行されることによって開くウインドウやダイアログボッ 
クスなどの大きさはこの設定に影響されません0 

• ALIGN 属性 

Java Applet の動作領域と Java Applet が含まれるテキスト行との位係を 
設定します 0 ただし、 Web ブラウザや表示フォントによっては、表現結果力微妙に 
異なる垛合があります。 

城性値 top 、 middle 、 bottom は、テキスト行に対して_像を揃える位 itt を設 
定します。また、 ALIGN 诚性を古略すると、初期侦として bottom が使用されま 
す0 

表示結采は IMG 要索の ALIGN 诚性を参照してください ( P .221 参照)〇 

• HSPACE 属性 

Java Applet の左右の余由を pixel 数で設定します 0 W 性を省略すると、〇以夕 t 
の敁小値が設定されます（具体的な値は Web ブラウザによって異なる)。 

表示結果は IMG 要素の HSPACE «性を参照してください ( P .225 参照)。 

•VSPACE 属性 

Java Applet の上下の余白を pixel 数で設定します。 W 性を省略すると、0以外 
の M 小侦が設定されます（具体的な値は Web ブラウザによって異なる)。 


マルチメディア 



ilii 

PARAM < PARAM > (終了タグなし） 


Java Applet のパラメータ (The PARAM element) 


阅空 
醒13_> APPLET 

- 

PARAM 要素は、 APPLET 要素で設定された Java Applet の実行に必要なパラ 
メータを設定するための要素です。必ず APPLET 要素の中の、それも M •初に置か 
れます。 

なお、 PARAM 要素は開始タグく PARAM > のみでマークアップされる、いわゆる 
空の要素です。終了タグは省略ではなく、もともと存在しません。 

«=a - 


• NAME 


値 

働き 

H 3 

N 4 

14 I 

text 

パラメータの名前を股定 

〇 

〇 

〇 




厲性は必須 

•VALUE 

値 

働き 

H 3 

N 4 

14 

text 

パラメータの值 

〇 

〇 

〇 


厲性は省略可 


㈣ =-細なテキスト 

- 

• NAME 属性 

Java Applet が実行時に必要とするパラメータの名前を設定します。 PARAM 要 
素必須の属性です。 

參 VALUE 属性 

パラメータの 値を設定します。 
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<p> 

<APPLET CODE="cat.Class" WIDTH="200" HEIGHT=”200" 
ALT:” 【猫が歩き回る Java Applet アニメーション 】 "xPARAM 
NAME="sound" VALUE=-footfall.ai££|mew•aiff"><BR> 

このページは Java Applet を使用しておりますが、く A HREF= 

"main_njava.html" > 非使用のページも別途用意しております〇 < / A > ど 
うぞご利用ください。 

</APPLET> 

</P> 


Column プラグインより Java ? 


現在インターネット上には、表示に Shockwave などプラグイン ( P .290 
参照）を必要とする Web ページが数多くあります。このプラグインは、 
Web ブラウザそのものの機能を拡張してくれる便利なものですが、使用す 
るためにはあらかじめインストールしておかなければなりません。しかも、使 
用するデータに合わせて何種類も用意しなければなりません。 

しかし、データ制作者がブラグインに相当するプログラムを Java で作成 
して、データと一緒に配信すれば、この問題はかなり解決できます。なぜな 
ら、 Java のプログラムは、基本的にどの JavaVM (Java Virtual Ma 
chine : Java プログラムを実行するためにソフトウ i アで構築された仮想 
コンピュータ）でも動作するので、ユーザは JavaVM を1つ用意しておけば、 
それ以上の手間は不要になるからです。あとは Web サイトへアクセスすると 
Java のプログラムとデータが自動的にダウンロー ドされ、 Web ブラウザ 
(あるいは 0 S 上）の JavaVM 内で実行されます。 

以前は Java プログラムは1から作成していましたので、一般人にはちよ 
っと敷居が高かったのですが、最近ではデータの作成時に、自動的に必要 
な Java プログラムも作成してくれるソフトウェア （ Macromedia 社の Di 
rector や GEO 社の Emblaze シリーズなど）もありますので、今後さらに 
Java プログラムを利用した Web ページが普及するでしょう。ただ、その前 
に各社の JavaVM 間の互換性をなんとかして欲しいものです…。 





拡張要素の注意点 


これまで紹介してきた HTML 3.2 の要素とは別に、 Web ブラウザメーカーによつ 
て考案されたさまざまな拡張要素が存在します0それらの中には、スクリプトやフ 
レーム機能のように 、 HTML 4.0 において採用されたものもあります。 


HTML ん〇で採用された抵••索- 

スクリプトとフレーム関速の要素は 、 Netscape Navigator 2.0 や Internet Ex 
plorer 3.0 に実装されたこともあって、古くから多くの Web ページで使用されてい 
ますが 、 HTML 3.2 では規格外の要素です。そこで、どうしてもフレームやスクリ 
ブトを使用したい場合は、 HTM し 3.2 ではなく HTML 4.0 の文丧として記述する必 
要があります。 

W 3 C の HTML 4.0 には 「Strict DTD」「Transitional DTDj「Frameset DTD 」 
と呼ばれる 3 種類の DTD が用意されていますが ( P .303 参照)、普段 HTML 3.2 を 
使用している人が例外的に HTML 4.0 を使用しなければならない場合は 、 Transi 
tional DTD に従うといいでしよう 0 なぜなら 、 Transitional DTD は HTML 3.2 
との互換性を考慮した、いわゆる「移行明」の規格なので、以下の点を確認すれば 
従来の HTML 文邦がほぼそのまま使用できるからです。 


•使用できなくなる要素の確認 

以前から使用を控えるよう推奨されてきた LISTING • PLAINTEXT • XMP の 
3要素は、完全に破粢されました。 

參必須になる属性の確認 

HTML 3.2 において使用が推奨されていた IMG 要素の ALT 域性は、必須の属性 
となりました。 

•制限が厳しくなる要素 

TR 要素の内容が0個以上から1個以上に変更されました。 

いかがでしょう0この程度の変更であれば比較的容易にできると思います 
( P .258 コラム参照）〇もちろん、このような安直な手段で出来上がった文書は、 




HTML 4.0 特有の機能が使用されていませんから 「HTML 4.0 らしい文普」とはい 
えません。ただ、内容と合致しない文書型宣言をしてしまうよりはいいのではない 
かと思います。 

なお、 フレームの 基本構造を設定する HTML 文害は、 TransitionalDTD では 
なく、専用の Frameset DTD に従わなければなりません。もつとも、とりあえず 
使う場合に憶えなければならない規則はそれほど多くはありません。 


Web ブラウザメ-力-の自«張獲橐- 

HTML 3.2 や 4.0 とは別に、 Web ブラウサメーカーが独自に拡張した要素も現実 
には使用されています。それらのうち、比較的知られている要素について、最後に 
いくつか紹介しておきました。 

ただし、これらの要素を使用した場合、 HTML 文害の文#型宣言が別題になり 
ます。当然ながら、 HTM し 3.2 や 4.0 の文讲型宣言を行ってはいけません。もちろ 
ん、メーカーが公開した DTD の文齊型宣言を行えばいいのですが、困ったことに 
-•番多くの独自拡張を行ってきた Netscape 社は DTD を公開していません。また、 
Microsoft 社にしても公開している DTD は 、 Internet Explorer 3.0/9 版用だけ 
です。正直に申し上げて、独自拡張要素を使用した場合の文#型宣言は、どうし 
てい いか策者にはわかりません 0 使用される方のご判断にお任せします （Microsoft 
本社の解説ページでは、なぜか HTML 3.2 DTD と HTML 4.0 Strict DTD の宣言 
例が敉っていますが…)。 

なお、本#では独自拡張要素については主な機能だけを紹介しています。また、 
EMBED 要素のように扱うブラグインによって要素の城性がさまざまに変化するも 
のはとても紹介しきませんので、使用される場合は各ブラグインメーカーか TS 布し 
ている資料をご覧になってください。 



關關 

SCRIPT <SCRIPT>-</SCRIPT> 


スクリプト (The SCRIPT element ) 


^ ©► 一般的なテキスト（本文参照) 

HEAD BODY 


SCRIPT 要素は、使用するクライアントサイド • スクリプト言語 （ Web ブラウザ 
が解釈して実行するスクリプト言語。 JavaScript や VBScript 、 Tel など）を宣言 
し、スクリプトを記述するために使用します。 

開始タグく SCRIPT 〉 と終了タグく/ SCRIPT 〉 によって、スクリプトをマークアツ 
ブします0また、 SCRIPT 要素の内容は他の要素の内容と異なり、空白文字の連 
続やタブ、「く」や「&」などの特殊な文字 （ P .310 参照）はそのまま認識されます（う 
っかり文字実体参照で記述すると、それはただの記号として認識される）。そして、 
椴初に「<」（7」の連続（終了タグの開始記号）か通れた時点で、内容の終了として 
認識されます。 

なお、スクリプトを十分に活用するためには、 HTML 4.0 の解説#、および各ス 
クリブト言語の解説普をご段ください。 




•TYPE 


1値 働き 

H 4 

N 4 14 ! 

content-type 使用するスクリブトの種類 

〇 

x 〇 

属性は 必須 


• LANGUAGE (廃止予定) 


^ w r-m 

—k J A*./ 

H 4 

N 4 


script 

使用するスク u プトの種類 

〇 

〇 

〇 


属性は必須 （ TYPE 属性が有効な場合は不要) 

•SRC 

値 

働き 

H 4 

N 4 

14 

url 

使用するスクリブトの URL 

〇 

〇 

〇 


属性は省略可 
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SCRIPT 


• DEFER (論理型) 



働き • 

"TT 1 

N 4 


defer 

スクリブトの実行を待たずに HTML 本文を表示 

〇 

X 

〇 


厲性は省略可 


•CHARSET 


■値 

働き 

H 4 

N 4 

14 

charset 

U ンク先のリソースの文字の符号化方式 

〇 

X 

X 


属性は省略可 


con/er)Mype = スクリプトの Content-Type 

scr/pf = スクリプトの S 語名 

url = URL c/)ouef = 文字の符号化方式 

索 7* - 

春 TYPE 属性 

使用するスクリプト言語の種類を MIME の Conteru - Type 形式で記述します 0 
HTML 4.0 ではスクリプト言語の種類について、特に 「 HTML 専用」というものを 
用意していませんので、スクリプトを使用する際には、必ずその種類を明示しなく 
てはなりません。したがって、この诚性は必須です。 

なお、 Netscape 社の独自規格では、スクリプト言語は LANGUAGE 尿性で設 
定していましたが 、 Transitional DTD ではこちらを使用するよう推奨されていま 
す (Strict DTD では LANGUAGE 铋性は破棄されている)。 


簡単な JavaScript の例 
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【//■_>ド - r コメントの終了 _ 

1 く / SCRIPT》^ - 1 終了タグ 1 

</HEAD> _ 

1 く BODY onLoad="goodmorning () "> [-< -4 イベントの設定 ) 

<P>onLoad 属性で設定されたスクリブトは、 HTML 文害の読み込み完了をき 
つかけとして実行されます。く / P> 

( 以下略） 


SCRIPT 要素に対応した Web ブラウザは、 SCRIPT 要素の内容を画面に表 
示せずスクリプトとして認識 • 実行しますが、 SCRIPT 要素に未対応の 
Web ブラウザではそのまま内容を表示してしまいます。それを防ぐため、 
SCRIPT 要素の内容は「コメント」として記述します。 



JavaScript の実行例 


• LANGUAGE 属性 

使用するスクリプト言語名を記述します 0 Transitional DTD では TYPE 厲性を 
使用するよう推奨されています （Strict DTD では LANGUAGE 属性は破棄されて 
いる)〇 

ただし 、 Netscape Navigator は TYPE 属性に対応していませんので、しばらく 
は LANGUAGE 属性も併用することになるでしょう0 
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SCRIPT 


I〈SCRIPT LANGUAGE^"i avascript " > • ヤ 

- 1 [ 7 , 


TYPE 属性と異なり、言語名 
だけを記述 


修 SRC 属性 

使用するスクリプトを当該 HTML 文書内に記述せず、別のファイルに記述して、 
それを呼び出して使用することもできます 0 その場合、 SRC 属性でスクリプトを記 
述したファイルの URL を設定します。 

參 DEFER 属性 

DEFERS 性を指定することによって、スクリプトが HTML 文趣表示の際にテキ 
ストを挿入しないことを明示します。そのため、 Web ブラウザはスクリプトの実行 
終了を待たずに、 HTML 文書を表示し始めることができます。 

DEFER 诚性を指定する場合は城性名は省略し、诚性値 「 defer 」 のみを記述し 
ます。 


• CHARSET 属性 

リンク先のリソースの文字の符号化方式を設定します0 






NOSCRIPT <NOSCRIPT>^</NOSCRIPT> 


スクリフト天。 Web フラウ:^の代替靜: KOSC ^ IFTelement ： フロックレへル關 


阅 ©► HI H2 H3 H4 H5 H6 
ADDRESS 

P UL OL DL (DIR) (MENU) PRE DIV CENTER 
BLOCKQUOTE FORM ISINDEX HR TABLE 
TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE 
INPUT SELECT TEXTAREA A IMG APPLET FONT 
BASEFONT BR MAP SCRIPT 
一般的なテキスト 

0133 ► BODY 

DIV CENTER BLOCKQUOTE FORM TH TD 

NOSCRIPT 要素は、スクリプトに未対応、あるいはスクリプト機能をオフにし 
ている Web ブラウザやアブリケーシヨンのための代替要素です。反対に、スクリブ 
卜に対応している Web ブラウザでは内容は表示されません。 

開始タグ < NOSCRIPT > と終了タグ </ NOSCRIPT > によって、代替テキストな 
どをマークアップします。一般的には、リンクなどを設定して、スクリプト機能が 
不要なページなどを案内します。 

く ！ DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transi 
tional//EN"> 

( 中略） 

<SCRIPT TYPE="text / javascript"> 

( スクリプト省略） 

</SCRIPT> 

<N0SCRIPT> 

<P> 

申し訳ありませんが、このページは JavaScript を多用しております。 <BR> 

なお、別途く A HREF=_http: "www.pump-inc.com/nscript—in 
dex.html">JavaScript を使用しないページく / A> も用意しております。 

</P> 

</N0SCRIPT> 

( 以下略） 
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ktenn 


NOSCRIPT 見本 1 


, し訳ありませんが^このべ 、一 - 

なお、別迕!ほ iiBB 3 BHSS 




ます。 



NOSCRIPT 要素には、 HTML 4.0 の基本属性の多くが設定できますが、そ 
れらについては別途 HTML 4.0 の解説害をご覧ください。 


Column NOSCRIPT 要素の機能について 

「 NOSCRIPT 要素は、スクリプト未対応の Web ブラウザへの配慮」と 
本文では書いていますが、「スクリプト未対応の Web ブラウザなら、< N 0 
SCRIPTx / NOSCRIPT > というタグも認識できないのでは？」という疑 
問が沸くかもしれません。これはその通りで、実際にスクリプト未対応の 
Web ブラウザは < SCRIPT > fc < NOSCRIPT > も認識できません。要する 
に NOSCRIPT 要素の内容だけを解釈して表示いるのです。 

反対に、スクリプトに対応した Web ブラウザは、 < NOSCRIPTx/NO 
SCRIPT 〉 タグを認識して、その内容を表示（解釈）しないようにします。 

なお、フレーム未対応の Web ブラウザのための NOFRAMES 要素やプ 
ラグイン未対応 Web ブラウザのための NOEMBED 要素についても、その 
機有 g は同様です。 


M 1 








■ ■■遇 

F RAA/lESET <FRAMESET>~</FRAMESET> 


フレームの設定 (The FRAMESET element) BODY 要素に相当 


阅 ©► FRAMESET 

FRAME NOFRAMES 
6113 ► HTML 


フレームの基本構造は、通常の HTML 文韪とは別に卑用の HTML 文#で設定し 
ます0 FRAMESET 要素は、その専用 HTML 文卉に蹬かれ、フレームの基本構造 
を設定するために使用します。 

FRAMESET 要素は、通常の HTML 文宵の BODY 要素に相当するもので、その 
内容には実際にフレーム内に表示するリソース （ HTML 文洩に限りません）を設定 
する FRAME 要素、フレーム未対応の Web ブラウザのための代替要素である 
NOFRAMES 要素が iR かれます。また、 FRAMESET 要素は人れ子にすることが 
できますので、複雑なフレームを設定することも可能です（実用的かどうかは別問 
題)〇 

なお、 FRAMESET 要素の骰かれる「フレーム設定用の HTML 文冉」は 、_の 
Frameset DTD に基づいて作成しなければなりません。そして、作成された文# 
は以下のような文邦型宣言を行います。 


<! DOCTYPE HTML PUBLIC ■•//W3C//DTD HTML 4.0 
Frameset//EN”> 


一方、フレーム設定用の HTML 文害によって呼び出される（フレーム内に表示さ 
れる） HTML 文畨は 、 Transitional DTD に基づいて作成しなければなりません 
(HTML 3.2 の文普はそのままでは使用できません)〇そして、作成された文軎は以 
下のような文書型宣言を行います。 


<! DOCTYPE HTML PUBLIC --//W3C//DTD HTML 4.0 Transi 
tional//EN"> 
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FRAMESET 


フレームは便利な機能と思われていますが、未対応の Web ブラウザやアプリ 
ケーシヨンのユーザにとっては大変やっかいな存在です。また、フレーム対応 
Web ブラウザのユーザの中にも、フレームが嫌いなユーザは大勢います。た 
とえば、画面の狭いノー トパソコンなどを使用していると、フレームがあると 
表示面積が狭められ、横スクロールしなければ内容が見渡せなくなります。 
あるいは、フレームが枠とスクロールバーで埋まってしまい、文字がさっぱり 
読めない時もあります。 

フレームを使用する前に、本当に自分の文書はフレームが必要なのかどうか、 
今一度検討してください0また、どうしてもフレームを使用したい場合は、 
NOFRAMES 要素 （ P .270 参照）も必ず併用してください。 


MH2 - 

• ROWS (初期値：100%) 


multi-length 

•COLS (初 

横方向の分割領域設定 

1 期僅：100%) 

〇 

〇 〇 
厲性は省略可 

値 

働き 

H4 

N4 

14 

multi-length 

縱方向の分割領域設定 

〇 

〇 

〇 


multi-length = pixel8S, %値、相対值 


属性は省略可 


以上の他にも 、 HTML 4.0 の基本属性の多くが設定できますが、それらにつ 
いては別途 HTML 4.0 の解説害をご覧ください。 


- 

參 ROWS 属性 

フレームの横方向の分割設定を行います0 

pixel 数による絶対値、ウインドウの高さに対する％値、あるいは相対値（数値 
の後ろに「*」を付加）のいずれかの値により、各フレームの高さを設定します。また、 
それらは設定するフレームの数に合わせて、コンマで区切って記述します（設定方 
向は上から下の順になる）。 

なお、厲性値を省略すると100%が設定されます。この場合は、横方向の分割は 
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行われません。 



※ TITLE 要索以外の HEAD 要索、及び NOFRAMES 要索は省略 



ROWS 厲性の投定例（播に2分割した場合） 

•COLS 属性 

フレームの縦方向の分割設定を行います0 

pixel 数による絶対値、ウインドウの高さに対する％値、あるいは相対値のいず 
れかの値により、各フレームの横幅を設定します0また、それらは設定するフレー 
ムの数に合わせて、コンマで区切って記述します（設定方向は左から右の順になる)〇 
なお、属性値を省略すると100%が設定されます。この場合は、縦方向の分割は 
行われません。 
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FRAMESET 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frame 
set//EN 
(中略） 

<F 


RAMESET [CQLS="30% f 70% w >] —— 

< FRAME SRC="l.html"> ^ /uvo ； j 


フレームを縦方向に分割 
のフレームが 30 %、右 
のフレームが 70%) 


巧 


< FRAME SRC 
</FRAMESET> 


•2.htmr 





設定値の混在 

pixel 数による絶対値、ウインドウの高さに対する％値、相対値による各設定方 
法は、同時に使用することができます0たとえば、3つのフレームを設定し1つは 
絶対値によって固定し、残り2つを相対値によって適当に設定することもできます。 


<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frame 
set//EN"> 

(中略) 

<FRAMESETICOLS="1*, 240,2* "ド 
<FRAME SRC="l.html"> 

<FRAME SRC="2.html"> 

<FRAME SRC= n 3.html"> 

</FRAMESET> 


フレームを縱方向に分割（中 
のフレームの横幡が 240pix- 
el 、 残りを左右のフレームで 
1 対 2 の比率で分割） 


1 


2 55 

























2 章 HTMUJ フアレンス 



COLS 厲性の股定例 （18 に3分割した埸合） 


ROWS 属性と COLS 属性の混在 

ROWS 城性と COLS 诚性は同時に使用することができます。その場合は、まず 
ROWS 诚性によって横方向の分割が行われ、次いで上のフレームの左から右へ 
COLS 祕性によって縦方向の分割力珩われ、さらに下のフレームも順次左から右へ 
分割されます。 


<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frame 


set//EN"> 

( 中略） 

<F 


RAMES 

<F 


SET1ROWS = "40%,60%"](COL 


RAME SRC= 
<FRAME SRC: 


<F 

<F 

<F 

<F 


RAM 

RAM 

RAM 

RAM 


E SRC: 
E SRC: 
SRC: 
SRC: 


.html 

html 

html 

html 

html 

html 


_ ROWS 属性によって横方向に分割 

j (40% 60%) _ 

CQLS="20%,50%,30 % "卜 


CLOS1S 性によって紀 

4(20% 50% 30^ 


</FRAMESET> 










COLS 厲性の股定例（投3分割横に2分割した場合） 


■■ 

拡 

張 


フレームの入れ子 

FRAMESET 要素の中に別の FRAMESET 要素を沢くと、フレームを入れ子に 
することができます。また、その数に制限はありません（実用性は別の問題)〇 


<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frame 


set//EN"> 

(中略） ▼ _ 

く FRAMESET |C0LS= " 30%, 70%"]> 

く FRAMESET [ROWS="40%, 60%">] 
<FRAME SRC="l.html"> 

<FRAME SRC="2.html"> 
</FRAMESET> 

<FRAME SRC="3.html"> 
</FRAMESET> 


COLS 厲性によって縱方向 
に分剳 (30% 70%) | 

左のフレームを ROWS 厲 
：\性によって横方向に分割 
•‘ (40% 60%) 
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2 章 HTMLU フアレンス 


□ —■ -室 Netscape : FRAMESET 見本 5 ■― ~ PI B 

民5 次 み iA みホ-ム mSt ガイド 5伢 プリント t ： キ28 

1 

3 

/ 

2 

X 


f±40% F60% £ j>30% 右 70%)_ コ 或 J 


フレームの入れ子の例 


Column HTML 3.2 と HTML 4_0の違い（補足) 


HTML 3.2 と HTML 4.0 (Transitional DTD ) の違いについて、細かい 
ことをいうともう1点違いがあります 。 HTML 3.2 では TABLE 要素の中に 
行データである TR 要素が置かれていましたが 、 HTML 4.0 では、表の内容 
をグループ化する THEAD (表のヘッダ） • TFOOT (表のフッタ） 
BODY (表の本体、必須）の3種類の要素が置かれ、その中に TR 要素が 
置かれます。これによって、表のデータを適切にグルーブイ匕し、データをス 
クロールさせたり、的確な音声出力を実現することができます。 


く TABLE 〉 _- [表組の開始1 @のヘッダ要索) 

<TR><TH> A</TH><TH> B </TH><TH> C </THxTH> D </THx/TR> 
♦ </THEAD> 

[-►<TB0DY> 

<TR><TD> 1 </TD><TD> 2 </TDxTD> 3 </TD><TD> 4 
</TD></TR> 

- ►</TB0DY> _ 

</TABLE〉^ - 1 表組の終了"! 


では 、 HTML 3.2 DTD に基づいて作成した表は変更が必要なのでしょう 
か？ いえ、これはそのままで大丈夫です。というのも 「 THEAD-T 
FOOT 要素が存在せず、 TBODY 要素が1つしか存在しない場合は、開始 
タグ < TBODY > は省略可能」なのです（終了タグ </ TBODY > は常に省略 
可能 ）。 HTML 3.2 DTD に基づいて作成された表には、当然ながら T 
HEAD • TFOOT 要素共に存在しませんし、 TBODY 要素に相当する表の 
本体も1つしか存在していません。したがって、文書的には変更は必要な 
いのです。 
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1111 

FRAME <FRAME> ( 終了タグなし ) 


ム内の設定 (The FRAME element) 


向空 
CH3^ FRAMESET 




FRAME 要素は、フレーム内に表示される具体的なデータです。といっても、実 


際にはデータそのものではなく、両像や Java Applet などと同様、 SRC 属性によっ 
てデータとなる HTM じ文密（リソース）の URL 先を設定します。また、余白やスク 
ロール、フレーム枠の形状なども FRAME 要素の属性で設定することができます0 
なお、 FRAME 要素は開始タグく FRAME 〉 のみでマークアップされる、いわゆる 
空の要素です。終了タグは将略ではなく、もともと存在しません。 

FRAME 要素の SRC 属性によってリンクされる（フレーム内に表示される） 
HTML 文害の内容は 、 HTML 3.2 ではなく Transitional DTD に従わなけれ 
ばなりません （HTML 3.2 からの変更点については P . 244参照）。また、文 
害型宣言も以下のように変更します。 

<!DOCTYPE HTML PUBLIC "-// W 3 C//DTD HTML 4.0 Transition 
al // EN "> 


•SRC 


フレーム内に表示するデータの URL 


O 


〇 


〇 


属性は省略可 


• NAME 




5 IH 5 ES 


mm 

text 

ターゲットにするフレーム名の設定 


〇 

〇 


属性は省略可 



I 


•LONGDESC 




■SB 

I2SH 

msm 

url 

フレームの内容に関する解説データの URL 


X 

X 


属性は省略可 
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HTML II フアレンス 


• NORESIZE (論理型) 



働き 

H 4 

N 4 


noresize 

フレームサイズの固定 

〇 

〇 

〇 


属性は省略可 


•SCROLLING ( 初期値 : auto ) 


1値 

働き 

H 4 

N 4 

mm 

yes 

スクロールパーを常時表示 

〇 

〇 

〇 

no 

スクロールパーを常時非表示 

〇 

〇 

〇 

auto 

必要な場合にスクロールパーを表示 

〇 

〇 

〇 




厲性は省略可 

• FRAMEBORDER (初期値： 0) 




| 値 

働き 

H 4 

N 4 

14 1 

1 

フレーム枠を表示 

〇 

〇 

〇 

0 

フレーム枠を非表示 

〇 

〇 

〇 


两性は省略可 


• MARGINWIDTH 


値 

働き 

H 4 

N 4 

14 | 

pixels 

フレーム内の左右の余白 

〇 

〇 

〇 


厲性は省略可 


• MARGINHEIGHT 


1値 

働き 

H 4 

N 4 

14 

pixels 

フレーム内の上下の余白 

〇 

〇 

〇 


厲性は省略可 




url = URL = —般的なテキスト 

pixels = pixel 数 


以上の他にも 、 HTML 4.0 の基本属性の多くが設定できますが、それらにつ 
いては別途 HTML 4.0 の解説害をご覧ください。 


- 

參 SRC 属性 

フレーム内に表示させるデータを含む HTML 文書の URL を設定します0また、 
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FRAME 


HTML 文書以外のリソース（画像など）を直接設定することもできます。 


<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frame 
set//EN"> 

(中略) 

く FRAMESET COLS="30%, 70%" > _ 

> _ - - J 左フレームの内容 1 

RframE SRC="2,html w >)^ - 1 右フレームの内容 

</PRAMESET> 



FRAME 要索の使用例 


• NAME 属性 

ター ゲッ トフレーム名を設定します。この値は、同時に LINK • A • AREA • 
FORM 要素の TARGETS 性 （HTML 4.0 で追加された属性）の値として使用され 
ます。 

たとえば、左フレームにリンク（起点アンカー）を設定した目次や索引を表示し、 
右側のフレームにはそのリンク先リソースを表示する場合などに使用されます。 



フレームの基本構造の股匾 


























2 章 HTML リファレンス 


<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transi 
tional//EN"> リンク先の HTML 文 S 「clover p.html 」 は ] 

(中略） .> 「wate し adj という名のフレームに表示 I 

<OL> f 

<LI>*^A HREF= "clover p.html" TARGET="water ad"t ►クロ ー バ 

- </Ax/LI>_ 

<LI>^A HREF="mabushiiyoru p.html"TARGET="water ad^)> 

眩しし、夜く /A></LI> ▲ - — - ——： -- 

MP Bi リンク先の HTML 文醫 rmabushiiyoro _ p . html 」 

圓驟^^^^^^■•は fwater . adj という名のフレームに表示 


左フレームに表示する [ TadJndex.htmlJ 
※ ㈠ 闩日ド • TARGET 属性以外の厲性は省略 
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FRAME 



左フレームはそのまま 


②右フレーム （ A 要索の TARGET 属性で設定された 「 water _ adj ) にリンク先リソース 
( mabushiiyoru _ p . html ) が表示される 


なお、 BASE 要素の TARGET 诫性 （HTML 4.0 で追加された铖性）で基准とな 
るター ゲッ トフレーム名を設定してある場合は、個々の LINK • A • AREA • 
FORM 要素で TARGET 城性を設定する必要はありません（設定した場合は BASE 
要素の TARGET 诚性より優先される)〇 



^3 































2 章 HTMUJ フアレンス 


BASE • LINK • A • AREA • FORM 要素の TARGET 属性には HTML 文 
' 書作成者が自由に指定するターゲットフレーム名の他に、特別な値がいくつ 

か用意されています。 


• _blank 

新規にウインドウを開き、リンク先のリソースを表示します。 

• _self 

リンク（起点アンカー）を設定した HTML 文嘗と同じフレームにリンク先 
のリソースを表示します0 

• _parent 

リンク（起点アンカー）を設定した HTML 文害と同じフレームの親フレー 
ムにリンク先のリソースを表示します。特に親フレームがない場合は LselfJ 
と同じ結果になります。 

• 一 top 

リンク（起点アンカー）を設定した HTML 文窨が表示されていたフレーム 
を解除し、そのウインドウ内にリンク先のリソースを表示します。 


<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4 . 0 Fr 
set//EN"> 

(中略） 

<FRAMESET COLS:"40%, 60%" > 

<FRAME fSRC="cd fndex.htmT^_|_ 

<FRAME SRC="default.html" 睜 AME="wate? 

く / FRAMESET 》 牟 


■rame 



左フレームに起点アンカ 
一が投定されている 
「 cdjndex.htmlj 




右 フレーム に rwater _ cdj という名前を設定 ] 

フレームの S 本桐造の股定 


<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transi 
tional//EN"> 

(中略） 

<0L> 

<LI><A HREF="clover_cd.html"TARGETs^—blank”> クロー/《一 
</A></LI> 

<LI><A HREF="mabushiiyoru_cd.html” TARGET="_self ■> 眩 

しい夜く /A></LI> 

</0L> 

左フレームに表示する rod - index.htmlj 
※ ㈠ 闩日ド • TARGET 属性以外の属性は省略 
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FRAME 



^5 































1 章 HTMUJ フアレンス 


• LONGDESC 属性 

このフレーム内の HTML 文書に関する解説データを別の HTML 文書に持たせる 
場合、その URL を設定します。たとえば、音声出力を利用する場合などに役立ち 
ます。 


• NORESIZE 属性 

多くの Web ブラウザでは、フレーム枠のサイズ変更はユーザが自由に行えます 0 
しかし、 NORESIZE 厲性を設定することによって、フレーム枠のサイズを固定し 
てしまうことができます。 NORESIZE 属性を設定する場合は、域性名は竹略し_ 
性値 rnoresizej のみを記述します （ P .8 参照)。 

籲 SCROLLING 属性 

SCROLLING 城性を設定する ことによって、フレーム 内の スクロールバーの 表 
示/非表示を制御することができます。 

屈性値に ryes 」 を設定すると、 スクロール バーは常時表示されます 0 また ( no 」 
を設定すると スクロール バーは表示されません 0 あるいは 「 auto 」 を設定すると、 フ 
レーム 内の データがフレームより 大きい場合にのみ、 スクロール バーが表示されま 
す。なお、诚性を省略した場合は、動的に 「 auto 」 が設定されます。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 


Frameset//EN"> 

(中略） 

<FRAMESET C0LS="40%, 60%" > 


<FRAM 

<FRAM 


E SRC="ad_index.html" SCROLLING="yes"> 
E SRC=-default.html" NAME ジ water ad" 


SCROLLING="no"> 


</FRAMESET> 
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FRAME 



SCROLLING 厲性の使用例 


• FRAMEBORDER 属性 

フレーム枠（隣接するフレームとの区切り）の表示/非表示を設定します0祕性 
値「0」を設定すると、フレーム枠は表示されません0「1」を設定すると表示されま 
す0 

なお、 W 性を省略した場合は、自動的に「1」か誠定されます。 

隣接するフレームのどちらか一方で 「 FRAMEBORDER =" r 」 か說定されている 
と、フレーム枠は表示されます0したがって、フレーム枠を非表示にするためには、 
両方の FRAME 要素で 「 FRAMEBORDER ="0” J を設定する必要があります。 


<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 
Frameset//EN"> 

( 中略 ) 


〈FRAMESET COLS="40% # 60%-> 

<FRAME SRC="ad 一 index.html" FRAMEBORDER="0"> 
<FRAME SRC=-default.html" FRAMEBORDER=-0"> 
</FRAMESET> 



I 


? 6 7 

































2 章 HTMLU フアレンス 



籲 MARGINWIDTH 属性 

フレーム内に HTML 文押を表示する際の左右の余白を pixel 数で設定します〇た 
だし、表示するフレームのサイズが「設定した左右の余白+表示される HTML 文押 
(リソース）」より大きい場合は、見た目は左の余白だけが設定が有効になります 
(自動的にフレーム枠やウインドウが糸 S 小されることはありません)〇 
なお、诚性を省略した場合の初期侦は、 Web ブラウザによって異なります。 

• MARGINHEIGHT 属性 

フレーム内に HTML 文害を表示する際の上下の余白を pixel 数で設定します〇た 
だし、表示するフレームのサイズが「設定した上下の余白+表示される HTML 文齊 
(リソース）」より大きい場合は、見た目は上の余白の設定だけが有効になります 
(自動的にフレーム枠やウインドウが满小されることはありません)〇 
なお、域性を省略した場合の初期値は Web ブラウサによって異なります。 


<! DOCTYPE HTML PUBLIC ■-//W3C//DTD HTML 4 
Frameset//EN"> 

(中略） 

<FRAMESET COLS=_40%,60V> 

<FRAME SRC=■ad_index.html"> 

<FRAME SRC=-jdmook.html" NAME="water. 
MARGINWIDTH="50" MARGINHEIGHT-■80"> 
</FRAMESET> 


ad B 
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FRAME 



余白の股定例 


<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 
Frameset//EN"> 

(中略) 

<FRAMESET COLS«_40%,60V> 

<FRAME SRC* - ad^index.html"> 

<FRAME SRC--jdmook.html- NAME»"water_ad" 
HARGINWIDTH*"30" MARGINHEIGHT-"20"> 
</FRAMESET> 
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NOFRAMES <NOFRAMES>~</NOFRAMES> 


ム未対応 Web ブラウザ用の代替要素 (The NOFRAMES element) 


(0 ©► BODY (NOFRAMES は除く） 

6113 ► FRAMESET 

- 

NOFRAMES 要素は、フレーム未対応 Web ブラウザのための代替要素です。開 
始タと終了タグ</?^0ド尺八1^£8> によってマークアッブされた 
範囲は、通常はフレーム未対応 Web ブラウザでのみ表示され、フレーム対応 Web 
ブラウザでは表示されません 0 -般的には、別途用意されたフレーム未対応 Web 
ブラウザ用の HTML 文畨 への リンクを設定するために使用します0 
NOFRAMES 要素は、通常 FRAMESET 要素の中に®かれます （ P .272 「注意」 
参照)〇その内容には BODY 要素のみを置くことができますが、 BODY 要素は開始 
タグ•終了タグ共に省略か可能です。そのため、見た目上は全てのブロックレベル 
要素 • テキストレベル要素 • 一般的なテキストを直接骹くことができますが、 
NOFRAMES 要素の位蹬づけを忘れないためにも省略しない方がいいでしょう。 


<! DOCTYPE HTML PUBLIC "-// W 3 C//DTD HTML 4.0 Frame 
set // EN "> 

< HTML > 


< HEAD > 

< TITLE>NOFRAMES 見本 1 </ TITLE > 
</ HEAD > 


(<FRAMESET C 0 LS = "40%, 60%" > !♦ 


{ framese - 


】始タグ 1 


<FRAME SRC : 
<FRAME SRC : 


™ ad 一 index • html "> 
" default . html "> 


: T 要索 1 


<NC 


2 S > 


I < B 0 DY > 


< B 0 DY 要索の開始タグ ^ 


< P > 

申し訳ありませんが、このページはフレームを使用しております。 < BR > 
なお、別途 <A HREF =” ad _ index_nf フレーム不使用のぺ 

ージ</丸> も用意しております。 

</ P > 


</ B 0 DY > l ^ — 
< / NOFRAMES > 


BODY 要索の終了タグ g 


|</ FRAMESET > > ^- TfRAMESE 

</ HTML > 


•要累のづ ft ^ JvJOFRAMES 要-の内容) 


« TITLE 要索以外の HEAD 要索は省略 






NOFRAMES 


Netscape： NOFRAhES 


NOFRAMES 要素の 
内容は表示されない 


ム対応の Web ブラウザでの表示例 


etscope ： NOFRAMES 見本 1 


『 ,v r r I r \ r r 卜 


申しでありません: 
なお、別途 フレー. 


フレームを使用してお9求す。 一 

も用意してお9ます 0 

_フレーム未対応の Web ブラウザで 

は、通常 NOFRAMES 要索の内容 
だけが表示される 

Netscape Navigator 1.1 での表示例 


ktenn 


NOFRAMES 見本1 


FRftME : ad_ index .h 
FRPtflE : default .ht 


遍^ 


Lynx はフレーム表示ができないだけでフレ 
ーム関連の要素は認識できる。そのため、 
NOFRAMES 要素の内容を表示する。その 
一方で、 FRAME 要索の SRC 属性の値をリ 
ンクとして扱うこともできる 


Lynx での表示例 


2 7i 


































HTML リファレンス 


NOFRAMES 要素は、フレーム設定用の HTML 文害だけでなく、通常の 
HTML 文書（もちろん、 HTML3.2 ではなく、 HTML4.0Transitional DTD 
に従った文害）の中に置かれることもあります。その場合は、一般的なブロ 
ックレベル要素として扱われ、その内容には見出し • アドレス • ブロックレ 
ベル要素 • テキストレベル要素 • 一般的なテキストを置くことができます 
(ただし、 NOFRAMES 要素の入れ子はできない)。 

通常の HTML 文書に*かれた NOFRAMES 要素の内容は、その文香が 
FRAME 要素に呼び出されてフレーム内で表示される場合には非表示となり 
ます。一方、その文害がフレーム未対応の Web ブラウザやフレーム機能を使 
用せずに表示された場合には表示されます。詳細は HTML 4.0 の解説害をご 
K ください。 


MH1 - 

省略 


省略 


NOFRAMES 要索には、 HTML4.0 の基本属性の多くが設定できますが、モ 
れらについては別途 HTML 4.0 の解説害をご覧ください。 




向 TT I B U STRIKE BIG SMALL SUB SUP EM 

STRONG DFN CODE SAMP KBD VAR CITE A 
IMG APPLET FONT BASEF 〇 NT BR MAP INPUT 
SELECT TEXTAREA SCRIPT 
一般的なテキスト 
BODY 

HI H2 H3 H4 H5 H6 
ADDRESS 

P DIV CENTER BLOCKQUOTE FORM CAPTION 
TH TD DT DD LI 

TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET FONT 

- 

NOBR 要素は、改行を無効にします。たとえば、 Web ブラウザで HTML 文迸を 
表示する場合、通常は自動的に_面の端で折り返されますが、間始タグ < NOBR > 
と終了夕 /</ NOBR > タグでマークァッブされた範囲は、折り返し表示されなくな 
ります。しかし、 Web ブラウザのテキストの自動折り返し機能を無効にすると、表 
示画面の大きさによっては横スクロールしな I ナればならなくなり、不便です。 

なお、 NOBR 要素の中に散かれた BR 要素は有効となるようです。 

< P > 

< NOBR >〕 イツは、手がつけられない！！ 全曲シングルかと思わせるクオリテ 
ィ。他のバンドとはひとまわり違うスケール 0 く BR > R & amp ; B をベースにした実 
力派ブリットボップバンド water の 1 st アルバム 0 </ NOBR > 

</ P > 


改行の無効 （ NOBReak) 


テキストレベル要素 


NOBR 


<NOBR>~</NOBR: 


拡張(独自) 
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iiii 


WBR 


<WBR> ( 終了タグなし ) 


強制折り返し (WORD BReak) 


阋舀空 
eni3^ BODY 


HI H2 H3 H4 H5 H6 
ADDRESS 

P DIV CENTER BLOCKQUOTE FORM CAPTION 
TH TD DT DD LI 

TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET FONT 


- 

WBR 要素は、 NOBR 要忐内で強制的に改行を有効にするための要素です。 

この要ぶは単なる改行機能というより、改行位 K の「候補」を設定するような意 
味合いを持っています。たとえば、 BR 要素は意識的に改行を行うために使用する 
ものですから、設定された場所で必ず改行されます。しかし、 WBR 要素の垛合は 
Web ブラウザのウインドウに余裕があれ If 改行されません。また、 NOBR 要素内で 
も WBR 要素は機能します。 

なお、 WBR 要素は開始タグ <WBR> のみでマークアップされる、いわゆる空の 
要素です。終了タグは省略ではなく、もともと存在しません。 


< P > 

< NOBR > コイツは、手がつけられない！ ！ シングルかと思わせるク 

ォリティ。 < BR > 要素を指定 j 

他のバンドとはひとまわり違うスケール 0 (< WBR > tR & amp ; B をベースにした実力 
派ブリットボップバンド water の 1 st アルバム。 </ NOBR > 

</ P > 
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WBR 要素の使用例 

















關關 

MULTICOL <MULTICOL>^</MULTICOL> 


コラム (MULTIple COLumns) ブロックレベル要素 


阅 TT I B U STRIKE BIG SMALL SUB SUP EM 

STRONG DFN CODE SAMP KBD VAR CITE A 
IMG APPLET FONT BASEFONT BR MAP INPUT 
SELECT TEXTAREA SCRIPT 
一般的なテキスト 
BODY 

DIV CENTER BLOCKQUOTE FORM TH TD DD 
LI 


- 

HTML 文#でコラム（段組み）を設定する要素です 。 HTML 3.2 で段組みを実現 
するためには、表を応用するしか方法がありませんが、これは非常に設定が面倒で 
すし、同時に表が持つ本来の意味とはかけ離れる可能性があります。そこで 
Netscape 社は MULTICOL 要素を考案したようですが、独肖規格のためほとんど 
普及していません。 


MH1 

►COLS 



number 


コラム数の設定 


厲性は必須 


• GUTTER 




mzKm 

■8 E _ 

mm 

pixels 

コラム間の余白 

一 

1 

- 


属性は省略可 



pixels 


コラムの横幅 


属性は省略可 


number =数値 pixels = pixel 数 



独 

自 
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HTML リファレンス 



« 負斤とも〇手ばれる。ただし当>刀 
は a 立莒斤で•はなく®門府で務を 
玖った0その後.；'畜和天里の代に一 
時的に市司へ柊ったが、芊芩天里の 
代(こ左右検邡逍使斤が定められた。 
さら(こ.杓上天呈の代に左右が統合 
されて.現在に至る。 


_性解説 


•COLS 属性 

コラム数を設定する必須の属性です。 

• GUTTER 属性 

コラム問の余白を pixel 数で設定します 0 


GUITTER 属性によるコラム幅の指定 


COLS 厲性 、 GUITTER 

< P > 検非違使の 概要く/ P > _ J _ • «性の指定 

<MULTICOL1C0LS="2" GUTTER="30"> 

検非違使は「けびゐし」と読む。非違（非法違法）を検校虬察する役である。 
嵯峨天皇の代に設置された令外の官で、一般に衛門府の官人が兼帯する。 

< BR > 

役所は近衛大路の北、（東）堀川小路の西にあり、検非違使庁と呼ばれる。 
また、略して使庁、あるいは衛門府の別名 r 敉負のつかさ」から較負庁とも呼 
ばれる0ただし、当初は独立官庁ではなく衛門府で政務を執った。その後、清 
和天皇の代に一時的に市司へ移ったが、宇多天皇の代に左右検非違使庁が定め 
られた。さらに、村上天皇の代に左右が統合されて、現在に至る。 
</MULTICOL> 
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MULTI COL 


□ 

■ Netscape : MULTICOL 見本2 

0B 

形 羼*祕ホ- 幅 Y 

プリント セキ u 

枝 3 fiS 使の概要 

▼ -H 


▲ 

¥ 

mmm 「けぴ 
ゐ CJ と转む 0 IfiS 
(珅法通法）を枝校 
糸 LS する役である。 

天圼の代に is 里 
された令外の莒で、 

一股(こ »p 俯の莒人 
が蒹蒂する。 

ら r 負斤とも呼ばれ 

5〇 ただし、当初は 
拽立官斤ではなく* 

門府で MS を执っ 
た 0 その後、；畜和天 
至の代に 一 B 袖勺に市 
司へ柊ったが.芊冬 
天里の代に左右桉邾 


" 

▼ 


WIDTH 厲性によるコラム幅の表示例 


> WIDTH 属性 

コラムの 横幅を pixel 数で設定します。 


く P > 検非違使の概要く/ P > _ 

<MULTICOL C0LS="2" GUTTER="30"fwiDTH="250 


の指定 1^ 


検非違使は「けびゐし」と読む。非遠（非法達法）を検校虬察する役である c 
(中略） 

さらに、村上天皇の代に左右が統合されて、現在に至る0 
</MULTICOL> 


誦拡張(独自) ^ 
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SPACER 


任意のスペース （SPACEing element) 


阅 ©►> 空 

BODY 


<SPACER> ( 終了タグなし ) 



HI H2 H3 H4 H5 H6 
ADDRESS 

P LI DT DD PRE DIV CENTER BLOCKQUOTE 
FORM CAPTION TH TD 
TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET FONT 




HTML 文咨で任意のスペースを設定する要素です 0 HTML 文寄でスペースを実 
現するためには、よく IMG 要素で透過 GIF 画像を散き、その大きさを適当に調幣 


する方法が使用されています。そのようなトリッキーな方法に比べれば SPACER 要 


素は随分スマートですが、やはり Netscape 社の独自規格のためほとんど普及して 
いません。 

なお、 SPACER 要素は開始タグ < SPACER > のみでマークアップされる、いわゆ 
る空の要素です0終了タグは省略ではなく、もともと存在しません。 




•TYPE 


1値 

働き 

H 3 

N 4 

14 

horizontal 

横方向のスペースを設定 （ SIZE 属性を併用） 

一 

! 

一 

vertical 

縦方向のスペースを設定 （ SIZE 厲性を併用） 

一 

! 

一 

block 

ブロックスペースを設定 
( WIDTH 属性と HEIGHT 厲性を併用） 


! 

一 


属性は省略可 


•SIZE 


1， 

働き 

H 3 N 4 

14 [ 

pixels 

テキスト中のスペースの幅 

- j 

一 


属性は省略可 
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SPACER 


參 W 旧 TH 


1値 

働き 

N 4 

14 \ 

pixels 

ブロックスペースの横幅 

— j 

一 


厲性は 省略 可 


• HEIGHT 


値 

働き 


N4 

14 j 

pixels 

ブロックスペースの高さ 

一 

! 

一 


厲性は省略可 


•ALIGN ( 初期値： bottom) 


|値 

働き 

N4 

14 | 

top 

テキスト行上端にスペースの上嫌を揃えて配 ■ 


一 

middle 

テキスト行下嫌!にスペースの中央を揃えて配臛 


一 

bottom 

テキスト行下端にスペースの下嫌を揃えて配* 


一 

left 

テキスト行の左嫌にスペースを配置し、 

回 D 込みを股定 


一 

right 

テキスト行の右端にスペースを配靄し、 

回り込みを設定 

— 1 

一 


—▼life p/xe/s = pixel 数 


厲性は省略可 



鲁 TYPE 属性 

スペースの形状を設定します0 

horizontal はテキスト中の横方向のスペース、 vertical はテキスト中の縦方向 
のスペース=行間設定に相当します。 

block はブロックスペースを設定します。また、ブロックスペースの扱いは、 
IMG 要素で貼り込まれる画像とほぼ同じです。 

•SIZE 属性 

TYPE 厲性で horizontal と vertical を設定した場合、 SIZE 属性で大きさを決 
定します。 
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2 章 HTML リファレンス 


< p > 

検非違使は「けびゐし J と読む 0 く SPACER 1 TYPE = " horizontal " 
SIZE a _60_] > 非違(非法違法）を検校釓察する役である。嵯峨天皇の代に設 
置された令外の官で、一般に衛門府の官人が兼帯する。 < BR > 

く SPACERI TYPE = " vertical " SIZE ="40" I > 

役所は近衛大路の北(東）堀川小路の西にあり、検非違使庁と呼ばれる。 
(以下略） 


□罡 

Netscape ： SPACER 見本 1 - — ■ — — 0 日 

$ 民る fK A 

1^1 みホ-ム M ガイ F fili プリント 1 41211 

mmm ■ぴゐ 
る役て•あ 5 〇嗟_天笔 
蒂する0 ^ 


▲ 

¥ 

一 

▼ 

役所は近 
また、略し 
ば*れる。た 
和天呈の代 

琎方向に 40pixel 1 横方向に 60pixel のスペース 1"^ - 

のスペース 

di 大路の北、（東）艰 JN 小路の西にあ桟邪逍斤と呼ばれる0 
て使斤，あるいは» 門府の別名のつかさ j から K 負厅とも〇手 
だし.当 W) は迚立官庁ではなく ffi 門府で W 務を玖った。その f 金、；畜 
(こ一時的に市司へ柊ったが.芊芩天呈の代に左右桟邡逍使斤が定め 


^ L - l|ii ： ^ 


SPACER 要索の使用例 


•W 旧 TH 属性 

TYPE 属性で block を設定した場合、ブロックスペースの横幅を pixel 数で設定 
します。 

♦ HEIGHT 属性 

TYPE 城性で block を設定した場合、ブロックスペースの高さを pixel 数で設定 
します。 


•ALIGN 属性 

ブロックスペースとブロックスペースが 含まれる テキス ト行との位置関係を設定 
します。ただし、 Web ブラウザや表示フォントによっては、表現結果が微妙に異な 
る場合もあります。 

なお、ブロックスペースとテキストの位置関係などの表示結果については 、 IMG 
要素を参照してください ( P .22 1参照)。 
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MARQUEE 


<MARQUEE>^</MARQUEE ： 


¢9 ©► TT I B U STRIKE BIG SMALL SUB SUP EM 

STRONG DFN CODE SAMP KBD VAR CITE A 
IMG APPLET FONT BASEFONT BR MAP INPUT 
SELECT TEXTAREA SCRIPT 
一般的なテキスト 
BODY 

HI H2 H3 H4 H5 H6 
ADDRESS 

P DIV CENTER BLOCKQUOTE FORM CAPTION 
TH TD DT DD LI 

TT I B U STRIKE BIG SMALL SUB SUP EM 

STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET FONT 




Microsoft 社の独自規格で、 HTML 文害内にスクロールテキストを表示するた 
めの要素です。マーキーフレーム（枠）内をマーキー（テキスト）力微定された方向 
へ流れます。 

登場した当時は物珍しさからよく使用されていましたが、現在ではほとんど使用 
されていません。 


: j=m 

> WIDTH 


値 

働き 


N 4 

14 

length 

マーキーフレームの 横幅 

一 

一 

! 




属性は省略可 

• HEIGHT 

値 

働き 

H 3 

N 4 

14 

length 

マーキーフレームの 高さ 

一 

一 

! 


属性は省略可 


属性 


スクロールテキスト MARQUEE) 


1拡張(独自) 
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2 章 HTMLU フアレンス 



pixels 


マーキーフレームの横の余白 


属性は省略可 


•VSPACE 


| m 

働き 

N 4 

mm 

pixels 

マーキーフレームの縦の余白 

一 — 

1 


属性は省略可 


•BGCOLOR 


L 値 

働き 

H 3 

N 4 

14 

color 

背景色を指定 

一 

一 

! 


属性は省略可 


•ALIGN ( 初期値： bottom) 


|值 

働き 

H 3 

N 4 

14 

top 

テキスト行上端にマーキーフレームの 
上端を揃えて配爾 

一 

一 

j 

middle 

テキスト行下嫌にマーキーフレームの 

中央を揃えて配鼸 

— 


! 

bottom 

テキスト行下嫌にマーキーフレームの 
下雜を揃えて配靄 


— 

! 


厲性は省略可 


•DIRECTION ( 初期値： left) 


im^n 

働き 

H 3 

N 4 

rn 

left 

マーキーを右から左へ流す 

一 

一 

! 

right 

マーキーを左から右へ流す 

一 

一 

! 

up 

マーキーを下から上へ流す 

一 

一 

j 

down 

マーキーを上から下へ流す 

— 

一 

I 


属性は省略可 


• BEHAVIOR ( 初期値： scroll) 


| 値 

働ぎ 


N 4 

14 | 

scroll 

マーキーが端から出て端に消える 

一 

一 

! 

slide 

マーキーが端まで移動したら停止する 

一 

一 

! 

alternate 

マーキーがマーキーフレーム内を往復する 

一 

一 

! 


属性は省略可 
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MARQUEE 


• LOOP 

|値 

働き 卜 

H3 N4 

14 

number 

マーキーの表示回数 

一一 

1 

infinite 

マーキーの表示を無限に繰り返す(=-1) 

- 一 

! 


属性は省略可 


♦SCROLLDELAY 



し汽 1 

H3 

N4 

rn 

number 

マーキーの 移動時間間隔を 
ミリ秒数 （1/1 000秒）で指定 

一 

一 

1 




属性は省略可 

• SCROLLAMOUNT 




| 値 

働き 

H3 

N4 

14 ■ 

number 

マーキーの移動距離間隔を pixel 数で指定 

一 

一 

j 


属性は省略可 




/eng//): pixel 数、または％ p/xe/=pixel 数 
co/or =色指定の16進数、または色名 number 数植 


ftalfeK 編? I - 

參 WIDTH 属性 

マーキー フレームの横幅を pixel 数で、または Web ブラウザのウインドウに対す 
る％値で設定します。 


• HEIGHT 属性 

マーキーフ レームの商さを pixel 数で、または Web ブラウザのウインドウに対す 
る％値で設定します。 

• HSPACE 属性 

マーキーフレームの横の余白を pixel 数で設定します0 

參 VSPACE 属性 

マーキーフレームの縦の余白を pixel 数で設定します。 



• BGCOLOR 属性 

マーキーフレーム色を16進数、または色名で設定します0 
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2 章 HTMLII フアレンス 
參 ALIGN 属性 

マーキーフレームとマーキーフレームが 含まれるテキス ト 行との位置関係を設定 
します。ただし、 Web ブラウザや表示フォントによっては、表現結果が微妙に異な 
る場合もあります。 

属性値 top 、 middle 、 bottom は、テキスト行に対してマーキーフレームを揃え 
る位置を設定します。また、 ALIGN 域性を省略すると、初期値として bottom が 
使用されます。さらに、 HSPACE 属性や VSPACE 域性でマーキーフレームに余白 
が設定されている場合は、そこが基準になります。 

なお、マーキーフレームとテキストの位匮関係などの表示結果については 、 IMG 
要素を参照してください ( P .22 1参照)。 



1 AR 叫 EE 見本1 


0E 


，ドレス : ©L 


これが 


マーキ H 


です0 


N 7 —キーフレーム 

(200 x 40 pixel ) 


マー d 

F —はマーキーフレー1 


テキスト行上端にマーキーフ i 

レ 

1ムの上部に表示される 


ームの上端を揃えて K 園 



(ALIGN 属性が top ) 



MARQUEE 要索の使用例 


Windows 版 Internet Explorer 4.0 では、 ALIGN 属性が無視されることが 
あります。 

バージョン3.0、あるいは Mac OS 版なら問題ありません 0 
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MARQUEE 


籲 DmECTION 属性 

マーキーを流す方向を設定します。 

• BEHAVIOR 属性 

マーキーの動きに変化をつける属性です0端から出て端に消える scroll、 端まで 
移動したら停止する slide、 マーキーフレーム内を往復する alternate の3種類が 
設定できます。 

• LOOP 属性 

マーキーの 表示回数を設定します。 infinite か>1を設定すると、 マーキーの 表示 
を無限に繰り返します0 

•SCROLLDELAY 属性 

マーキーの移動時間、すなわち再描画間隔をミリ秒数 （1/1000 秒）単位で設定し 
ます。 


• SCROLLAMOUNT 属性 

マーキーが一度に移動する距離を pixel 数で設定します。値を大きくすると移動 
速度が上がります。 



i 11 

BLINK <BLINK>~</BUNK> 


卜の点滅 ( Blinkingtext ) テキストレベル要素 


(«) ©► TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
IMG APPLET FONT BASEFONT BR MAP INPUT 
SELECT TEXTAREA SCRIPT 
一般的なテキスト 
0113 ► BODY 

HI H2 H3 H4 H5 H6 
ADDRESS 

P DT DD LI DIV CENTER BLOCKQUOTE 
FORM CAPTION TH TD 

TT I B U STRIKE BIG SMALL SUB SUP EM 
STRONG DFN CODE SAMP KBD VAR CITE A 
APPLET FONT 




フ オン トスタイル要素の一種です0 

開始タグ < BLINK > と終了タグ </ BLINK > でマークアップされたテキストは、画 


面上で点滅表示されます。古くから存在する要素ですが、あくまでも Netscape 社 
の独自規格です0 

テキストを手っ取り早く目立たせるためには便利な要素かもしれませんが、時と 
場合によっては非常にうるさく感じられます。世の中には BLINK 要素によるテキ 
ストの点滅を嫌う人が大勢いることは、知っておいた方がいいでしょう0 


<P>Second Single<BR> 

く FONT SIZE="+2"> 「眩しい夜」 </FONT><BLINK> 好評発売中！ 
</BLINKx/P> 
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BUNK 



拡張(独自) 
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EMBED 


<EMBED>^</EMBED> 


ブラクイン ( EMBEDding ) テキストレベル要素 


向 ©► NOEMBED 

TT I B U STRIKE BIG SMALL SUB SUP EM 

STRONG DFN CODE SAMP KBD VAR CITE 

INPUT SELECT TEXTAREA A IMG APPLET FONT 

BASEFONT BR MAP SCRIPT 

一般的なテキスト 
■13 ► BODY 

HI H2 H3 H4 H5 H6 
ADDRESS 

P DT DD LI DIV CENTER BLOCKQUOTE 
FORM CAPTION TH TD 

TT I B U STRIKE BIG SMALL SUB SUP EM 

STRONG DFN CODE SAMP KBD VAR CITE A 

APPLET FONT 


要素应概要 


EMBED 要素は、 HTML 文捭内でブラグインを実行させるための要素です。 
EMBED 要素はテキストレベル要素なので、 ブロック レベル要素やテキストレベル 
要素、あるいは一般的なテキストの中に我くことか〃できます。 

ブラグインが使用するデータや条件は各種属性で設定します。また、開始タグ 
< EMBED > と終了タグ</£!^18已0> によって、データの説明やブラグイン未対応 
の Web ブラウザで表示すべき代替テキストをマークアップします（内容をブラグイ 
ン対応の Web ブラウザで表示させたくなレ、場合は、さらに NOEMBED 要素を使用 
する)〇 

なお、本書では EMBED 要素の基本的な厲性を取り上げています。しかし、ブ 
ラグインによってはさらに多くの属性を使用して、複雑な表示制御が行えるものも 
あります0各ブラグインについての詳細は、別途ブラグイン開発メーカーのマニュ 
アルなどをご覧ください0 


29 〇 


EMBED 


«=a 



ブラグインが使用するデータの URL 


属性は必須 


►WIDTH 


レ直 

働き 

H3 

N4 

14 _ 

pixels 

表示するデータの横幅 

一 

! 

! 


厲性は必須 


Mamm 

働き 

H3 

N4 


pixels 

表示するデータの R さ 

一 

! 

1 


厲性は必須 


•ALT 



text 代替テキスト 


«性は省略可 


•ALIGN ( 初期値： left) 





N4 

"^1 

top 

テキスト行上蹦にデータの上端を揃えて配匿 

一 

! 

! 

middle 

テキスト行下端にデータの中央を揃えて配匾 

一 

一 

! 

bottom 

テキスト行下嫌にデータの下嫌を揃えて配臛 

一 

! 

! 

left 

テキスト行の左端にデータを E 匯し、 

回り込みを設定 

一 

! 

! 

right 

テキスト行の右端にデータを配匾し、 

回り込みを設定 

一 

! 

1 




厲性は省略可 

• HIDDEN 

( 初期値： false) 




■値 

働き 

H3 

N4 

mm 

false 

データを表示 

一 

! 

一 

true 

データを非表示 

一 

! 

一 


属性は省略可 
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•HSPACE 


値 

働き 

H3 

N4 

14 

pixels 

データ表示領域の左右の余白 

一 

! 

! 


属性は省略可 


•VSPACE 


|値 

働き 

H3 

N4 

14 

pixels 

データ表示領域の上下の余白 

一 

| 

! 


属性は省略可 


IPLUGINSPAGE 



厲性は省略可 


sa 


ur/=URL p，xe/s=pixel 数 
fex/ = —般的なテキスト 



•SRC 属性 

ブラグインが使用するデータの URL を設定する、 EMBED 要素必須の诚性です0 


•WIDTH 属性 

HEIGHT 诚性と対になって、ブラグインの動作領域（データの表示領域+コント 
ローラ部分）の横幅を pixel 数で設定します。属性を省略すると、データの原寸に 
合わせて自動的に調整して表示されるものもありますが、基本的には設定するもの 
と考えてください。また、ブラグインによってはデータの制御用に「コントローラ」 
を持っものがありますが (QuickTime Plugin や MIDI 関係のブラグインなど)、そ 
の場合は忘れずにコントローラ分の pixel 数を加算して設定します 0 

なお、原寸と異なる値を設定することもできますが、その場合は値に合わせて拡 
大 • 縮小表示はされません（使用するブラグインによって結果が異なるかもしれま 
せん)〇 


• HEIGHT 属性 

WIDTH 属性と対になって、ブラグインの動作領域の高さを pixel 数で設定しま 
す。 
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EMBED 


く EMBED SRC="water livel.mov" [WIDTH 
(QuickTime ムービー、約 140KB) 

</EMBED> [ ^r — 


HEIGHT="136' 


データの原寸は 160xl 20 pixel だが、 
QuickTime Plugin を使用する場合は、 
HEIGHT 属性の値にコント□ーラ分の 
16 pixel を加©する 



EMBED 要索の使用例 



klenn 


_I バ EE 

EMBED 見本 1 


[EMBED] (QuickTime ムービー、約 140KB) 


えず要索名 （[ EMBED ]) と内容のテ 
キストが表示される。 



Lynx での表示例 


•ALT 属性 

主にブラグイン未対応の Web ブラウザや音声出カアブリケーシヨンのために、代 
替テキストを設定する属性です 0 必須の属性ではありませんが、できるだけ有効に 
使用してください。 
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<EMBED SRC="water_livel.mov" WIDTH="160" HEIGHT="136" 
ALT=" 6 月 3 日の LIVE"> (QuickTime ムービー、約 140KB) 

</EMBED> 



また、ブラグイン未対応の Web ブラウザでも、データを受信して別のアブリケー 
シヨンで表示することか可能な場合もあります。そのため、重要なデータやぜひ見 
てもらいたいデータは、 ALT 诚性の使用と同時に、データへのリンクも設定してお 
くといいでしよう。 


<EMBED SRC«"water_livel.mov" WIDTH-"160" HEIGHT*"136" 
ALT« n 6 月 3 日の LIVE"> 

<A HREF="water_livel.mov"> (QuickTime ムービー、約 140KB) 
</A> 

</EMBED> 



データへのリンクを股定する 


W4 . 











EMBED 


參 ALIGN 属性 

ブラグインの動作領域と EMBED 要素が含まれるテキスト行との位置関係を設 
定します 0 ただし、 Web ブラウザや表示フォントによっては、表現結果が微妙に異 
なる場合もあります。 

属性値 top 、 middle 、 bottom は、テキスト行に対して画像を揃える位置を設 
定します。また、 ALIGN 城性を省略すると、初期値として bottom が使用されま 
す。 

表示結果は IMG 要素の ALIGN 属性を参照してください ( P . 221 参照)。 

• HSPACE 属性 

ブラグインの動作領域の左右の余白を pixel 数で設定します 0 属性を省略すると、 
0 以外の餃小値が設定されます（具体的な値は Web ブラウザによって異なる)〇 
表示結果は、 IMG 要素の HSPACE 厲性を参照してください ( P . 225 参照)。 

•VSPACE 属性 

ブラグインの動作領域の上下の余白を pixel 数で設定します。诚性を省略すると、 
0 以外の•小値が設定されます（具体的な値は Web ブラウザによって異なる)。 

• PLUGINSPAGE 属性 

ブラグインの入手先 URL を設定します0 

ブラグイン対応の Web ブラウザで必要なブラグインがインストールされていない 
場合、ブラグインの動作領域に「破れアイコン」が表示されます。また、多くの 
Web ブラウザでは自動的に「必要なブラグインがない」という類のメッセージと共に、 
ブラグインの入手先ページへのリンクボタンが表示されます。 


<EMBED SRC="water__livel.mov" WIDTH=»160" HEIGHT="136" 
PLUGINSPAGEs"http : //quicktime•apple.co.jp/"> (Quick 
Time ムービー、約 140KB) 

</EMBED> 

※弓闩〇 • WIDTH • HEIGHT 厲性以外の厲性は省略 



| 


独 

自 
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/X 

^[http：/^ 


こ の ページ(こ は通切な Plug-1 n がないと表示て■きないタイプ 
•video/quicktlme- の tl 相が含ま n ています。どうしますか？ 


I Pluq-ln1«8 )([ 


m 


必要なブラグイ ： /I 


(QuickTime ム， 


Netscape Navigator で、 

がない場合に表示される「破れアイコン」と 
ダイアログボックス。 「 Plug - in 惘報 」 (Inter 
net Explorer では「プラグイン情報」）ボタン 
を選択すると、 PLUGINSPAGE / S 性で設定 
された URL へ移動できる 


PLUGIN SP 厲性 I 


ブラグインがない壩合の表示例 


參 HIDDEN 属性 

城性値に true を設定すると、データを非表示にします。 K 性を省略すると初 
期値 false が与えられ、データは通常通り表示されます。 


2Q6 











ilii 

NOEA/l BED <NOEMBED>^</NOEMBED> 


プラグイン未対応 Web ブラウザ用の代替テキスト （NO EMBEDding ) テキストレベル要素 


(W) ©► TT I B U STRIKE BIG SMALL SUB SUP EM 

STRONG DFN CODE SAMP KBD VAR CITE 

INPUT SELECT TEXTAREA A IMG APPLET FONT 

BASEFONT BR MAP SCRIPT 

一般的なテキスト 
№3 ►- EMBED 
BODY 

HI H2 H3 H4 H5 H6 
ADDRESS 

P DT DD LI DIV CENTER BLOCKQUOTE 
FORM CAPTION TH TD 

TT I B U STRIKE BIG SMALL SUB SUP EM 

STRONG DFN CODE SAMP KBD VAR CITE A 

APPLET FONT 

- 

NOEMBED 要素は、 EMBED 要素の内容をブラグイン対応の Web ブラウザで表 
示したくない場合に使用される要素です。たとえば、ブラグイン未対応の Web ブラ 
ウザのためのメッセージは、対応 Web ブラウザでは必ずしも必要ではありません 0 
内容によってはかえって紛らわしくなってしまうので、非表示にした方がいいこと 
もあります。 

そのような場合に NOEMBED 要素が役に立ちます。開始タグ < NOEMBED > と 
終了タグ</ 1 ^ 0 £\ 18 巳 0 > によってマー クアッ ブされた範囲は、ブラグイ ン 対応の 
Web ブラウザでは表示されません。もちろん、未対応の Web ブラウザでは表示さ 
れます。 


<EMBED SRC="water_livel.mov" WIDTH="160" 
HEIGHT="136"> 

<NOEMBED><A HREF*"water_livel.mov"> (QuickTime ムービー、 
約 140KB) </A></N0EMBED> 

</EMBED> 


| 拡張(独 £ 


※弓闩〇 • WIDTH • HEIGHT 属性以外の属性は省略 




HTML リファレンス 




iHs=a 

なし 


「属性解説 


NOEMBED 要累の内容は 
表示されない 


ブラグイン対応の Web ブラウザでの表示例 


□ X 



ラグイン未対応の Web ブラウザでは 
OEMBED 要索の内容も表示される（リンク 
ど NOEMBED 要索内の他の要索も有効） 


Lynx での表示例 















BGSOUND <BGSOUND> ( 终 7 タグなし ) 


BGM の利用 (BackGround SOUND ) ヘッダ要素 


阅空 

01113 ► HEAD 

- 

BGSOUND 要素は、サウンドデータを Web ページの BGM として利用するための 
要素です。 

Microsoft 社の独自規格のため 、 Internet Explorer しか対応していません〇ま 
た、機能的には EMBED 要素でブラグインを利用して同様のことが実現できるため、 
使用されることはあまりないようです。 

なお、 BGSOUND 要素はヘッダ要素に诫しています。これは、サウンドデータを 
文#の一部に埋め込むというより、 「 HTML 文書全体に対する BGM 」 という意味合 
いが強いためでしょう0そのため、 EMBED 要素と異なり HEAD 要素内に骰かれ 
ます。また、 BGSOUND 要索は|»)始タグ < BGSOUND > のみで表現される、いわ 
ゆる空の要素です。終了タグは省略ではなく、もともと存在しません。 




參 SRC 


1値 

働き 

He 

N 4 

14 ! 

url 

再生するデータの URL 

一 

一 

j 


属性は省略可 



number 

サウンド再生の«り返し回数 

一 

一 

! 

infinite 

サウンド再生を無限に繰り返す （=•*!) 

一 

一 

! 


属性は省略可 


url = URL numb が=整数 
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- 

籲 SRC 属性 

再生するデータの URL を設定します0 

參 LOOP 属性 

サウンドの再生を繰り返す回数を設定します 0 また、 infinite 力、1を設定する 
と、無限に繰り返します。 


<BGSOUND SRC»"clover.wav- L00P« B 2 B > 

※画面上には何も表示されない 


300 





nnccnncnncnccnnccm ■ ■■■ 響 ■ ▼曹 
□□□nnncnnnnnnnccc^^ 

…… 一 ^^^ 

□□nnnnnnnnnonnnnnnD^^Hi^HBHHHHHl^H 

□□□□□□□□□□nnnccncnnnnncnnnnnnnncnnnnnc 

□□□□□□□□□□□□□□□□□□□□□□□□□□□nnnnnnnncnc 

incnncnnnccnncccncDnccnnnncnnncnnnnncc 

^□□□□□□□□□□□□□□□□nccnnccnnccnccccnnccc 

^□□□□□□□□□□□□□□cncnnnncnnncnnnnncnnnnc: 

^□□□□□□□□□□□□cncnnnnnnnnnccncnnnccncnc: 

^□□□□□□□□□□□□□□□□□□□□□ncncnnnnnncnnccc 

ranncnnnnnccnnccnnncnnnnccncncnnnnnncc 

Dnncnnnnncncccnnncnnnnnncncnnccccnnccc 


HTML の理解のために 


コ □□□□□□□ 

^ncnnnnc 

コ □□□□□□□ 
コ □□□□□□□ 
コ □□□□□□□ 

innnnccc 

コ □□□□□□□ 
コ □□□□□□□ 

コ □□□□□□c 
コ □□□□□□[ 
コ □□□□□□□ 
コ □□□□□□□ 

^nnnncnc 

コ □□□□□□[] 
コ □□□□□□□ 





















































































































































































































































































































HTML の簡単な歴史 


HTML 2.0 - 

HTM しは、文齊の構造を記述（明示）し、内部の情報を正確に伝えたり関速づけ 
する （ハイパー リンク）ための マークアップ 言語として考案されました0そのため文 
書の表示方法に関しては、あえて規定されていませんでした。 

ところが、 WWW が一般に普及するに従って、 HTML 文害を表示したときの 
「見栄えを制御したい」という要求が強くなってきました。そのため、 Web ブラウザ 
メーカーでは、自社の Web ブラウザでよりきれいに、おもしろく HTML 文薄を表 
示するために、さかんに HTML の拡張を行いました0これは一見ユーザの利益にな 
るように思えます。しかしよく考えると、これは HTML 文書の互換性を損なう原因 
ともなり、「簡単に情報を共有する」という WWW の目的から大きく逸脱することに 
もなりかねません。 

そこで1995年、 IETF によって、それまでばらばらに発展していた HTML の仕 
様をまとめた共通仕様 「HTML 2.0」が策定されました。この規格は現在でも基本 
的な HTML 規格として、多くの Web ブラウザに実装されています。 


HTML 2.x と 3.2 - 

しかし、 Web ブラウザメーカーは HTML 2.0 に滿•足しませんでした。その後も独 
自の拡張は続き、再びユーザは便利さと引き換えに混乱を押しつけられてしまった 
のです0そこで、 WWW の標準化と推進のために設けられた国際的な学術研究組織 
「 W 3 C 」において 、 HTML 2.0 の後継規格の審議が開始され、1997年1月には正 
式に 「 HTM し3.2」として勧告されました。 

HTML 3.2 は、当時すでに一般化しつつあったメーカーの独自拡張規格をいくつ 
力艰用しています。また、 HTML 文書を見栄えよく表示したい、という世間の要 
求にもある程度応えるため、フォントや色の指定方法も実装しています0ただし、 
見栄えに関しては、やはり本来 HTML が担うべき役割ではありませんし、私たち非 
西欧人にとっては重大な問題である国際化対応もなされていません 

実は、国際化対応については 、 HTML 3.2 とは別に HTML 2.0 をペースに進めら 
れていました 。 HTML 2.0 では使用できる文字 セツ トが ISO 646と ISO 8859-1 だ 
けで、日本語の JIS X 0208などは埒外に置かれていました。これに対しては、同 




HTML の簡単な歴史 


じく1997年1月、 IETF において正式な国際化規格 「HTML 2. x 」 が追加策定され 
ました。ただし 、 HTML 2. x は国際化対応しているものの、基本的な機能は HTML 
2.0 からほとんど変わりがなく 、 HTML 3.2 の代替規格としては世間の要求を満た 
すことができませんでした。 


HTML 4.0 


そこで W 3 C では HTML 3.2 の規格から見栄えに関する要素を分離し、加えて 
HTML 2. x の規格を取り込む形で国際化を果たす 「HTML 4.0」規格を提案しまし 
た。そして、業界から幅広く意見を求めながら検討を続け、1997年末に正式に 
W 3 C の勧告となりました。 

HTML 4.0 は真の国際化を果たしているだけでなく、 HTML 文寄の見栄えに関 
する設定方法の多くを HTML からスタイルシート （ P . 307参照）に分離し 、 HTML 
の方は本来の文齊の構造記述に專念できるようになっています。また、音声出力の 
際に混乱のない文畨を作成可能にしたり、キーボード操作を容易にする機能の実装 
など、アクセシビリテイが大きく向上した仕様となっています。さらに、スクリブ 
卜言語 （ JavaScript など）の正式サボートや、マルチメディアデータの扱いの改善 
なども大きな特徴となっています。 

ところで、一口に 「HTML 4.0」といっても、実は3種類の DTD (文典•型定義） 
が用意されています。 

•Strict DTD 

HTML 4.0 の正式な文書型定義です。見栄えの設定に関する要素や城性 
( ALIGN 诚性など）をほ (31^ 除しており、情報共有のためのマークアップ言語とし 
ては、理想に近い規格です。 


•Transitional DTD 

従来の HTML 3.2 との互換性を考慮した「過渡的な」規格です 。 Strict DTD で 
は、排除された見栄えの設定に関する要素や域性が残されています。そのため、 
HTML 3.2 に従って作成された文書は、比較的容易に Transitional DTD に移行 
することか0できます。 


• Frameset DTD 

フレームの基本構造を設定する、つまり FRAMESET • FRAME - 
NOFRAMES の3要素が置かれる HTML 文書専用の特別な規格です。作成された 
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フレーム内に表示される HTML 文害は、 TransitionalDTD に従ったものになりま 
す0 

もし、これから HTML 4.0 を使用する場合、本当は正式な規格である Strict 
DTD に従うことをおすすめしなければなりません。ただし 、 Strict DTD に従うと、 
ほとんどの見栄えに関する設定にスタイルシートを併用する必要があります。とこ 
ろが、現実的にはまだ多くの Web ブラウザが ' HTML 4.0 やスタイルシートに十分対 
応していません 0 そのため、一般的な利用のためには、現在のところ Transition 
alDTD (必要に応じて Frameset DTD ) に従うか、あるいは HTML 3.2 や 2.0 の 
DTD に従うのか现実的な選択といえます 0 ただし 、 Transitional DTD はあくま 
でも移行措阍としての規格で、将来的には廃止される運命にあります0この点は、 
将来にわたって廃止される予定のない HTML 3.2 や 2.0 と異なります。 

また、 ISO においては、 W 3 C と協力しながら Strict DTD をベースにした 「 ISO - 
HTML 」 の策定が進められています。 IS 0- HTML は、 HTML 文并の本義に立ち返 
って、悄報の互換性と再利用性を目的とした言語です 0 そのため 、 Strict DTD よ 
りさらに厳しく文#構造に合致した記述が求められることになります。なお、 IS 0- 
HTML は1998年末にも 「 ISO / IEC 15445」として規格化される予定です。 



HTML 2.0 (RFC 1866 http://ds.intemic.net/rfc/rfc1866.txt) 

HTML 3.2 Reference Specification (http://www.w3.org/TR/REC-html32) 
HTML 4.0 Specification (http://www.w3.org/TR/REC-html40/) 

HTML 4.0 Strict DTD (http://www.w3.org/TR/REC-html40/strict.dtd) 

HTML 4.0 Transitional DTD (http://www.w3.org/TR/REC-html40/loose.dtd) 
HTML 4.0 Frameset DTD (http://www.w3.org/TR/REC-html40/framesetdtd) 


主要な HTML の仕様書 • DTD の入手先 
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SGML と HTML の関係 

• 會 • 參春 #••••••• 翁#翁 • 參 _ 癱鲁参鲁參參鲁 ♦ 争 » 


実は、 HTML には基になった規格があります。それは、 SGML というマークアッ 
プ言語です。 SGML は、文書の共有 • 互換 • 再利用のために開発された規格です 
から、文書の互換性を損なう最大の原因であるレイアウト情報（表示や印刷など見 
栄えに間わる情報）を排除し、純粋に文宵の構造定義に徹しています。また、文書 
の作者がマークアッブに使用するタグの名前や使用方法を DTD に定義して利用す 
ることができるため、文杏の互換性を保ちながらも、文寒の内容に応じて柔軟に構 
造定義力听えます。 

一方、 WWW と共に開発されたマークアップ言語が HTML です0 HTML は「情 
報の共有（互換性.再利用性)」という WWW の目的を達成するために、その仕様 
の基礎部分には SGML を採用しました0もっとも、敁初の HTML は要素の定義や 
タグの使用方法に SGML の規則を借用した程度で、厳密な規則や DTD は存在しな 
かったそうです。しかし 、 HTML 2.0 の規格策定にあたっては、厳格に SGML の規 
則が適用されました。また、一般ユーザにも使用しやすいように、 HTML では 
DTD を固定化してしまいました。っまり、言い方を変えれば、 DTD か個定化され 
ている面を除いて HTML は 「 SGML そのもの」なのです。 

ただ、 DTD の固定という仕組みは、一部の人に不滿•をもたらしました0特に企 
業からは、固定化された DTD の枠には収まらない要素に対処すべく 「 DTD を自由 
に定義したい」という要望が強く出てきました。そのため、 HTML とは別に新たに 
XML (extensible Markup Language ) という規格が、 W 3 C によって策定され、 
現在バージョン 1.0 か TH 式に勧告されています。とは言え、一般ユーザーが XML を 
必要とする時代は、まだ先の話となるでしょう。 

なお、本来ならば SGML や DTD の仕組みを紹介した方がいいのでしょうが、 
HTM じ文書の作成に必須の事項ではないことや紙幅の都合もあり、省略させてい 
ただきました0興味のある方は、別途 SGML の解説書などをご乾ください。 
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SGML 文*の S 本翌 




HTML 文®の S 本型 



1 

文害型宜言 

* 



文書インスタンス 


文書構造面から見た SGML と HTML 


用&_脱 - 

• SGML 宣言 

文#を作成するために使用する基本的な文字セット、文赛矜》、タグや文字参照に使用される特 
別な記号に関する規定など基本的な規則力邱1示されます。たとえば、 HTML 3.2 では基本的な文字 
セットが ISO M6 (ASCII 文字セットとほ(№1じ〉と ISO 8859-1であることなどが宣言されています。 

• DTD (Document Type Definition :文書型定義〉 

どの要求には何というタグをつけてマークアップするのか、要*の親イ閲係はどうなるのか、 W 性 
の侦はどうなるのか、などマークアップを行うための基中が記述されています。 

SGML では、 DTD は推でも作成することができますが、突際には槳界で共通の DTD が策定され、 
それを各企衆で利用することも多いそうです。 HTML とは「インターネット榮界 （IETF や W3C) が 
作成した DTD を Web ブラウザメーカーや一般ユーザが利用している」と考えると、その位既付けが 
わかりやすレ、かと思います。 


•文1■インスタンス (Document Instance ) 

一般に馴染みのない言*なので、本井の中では使用していませんが、 DTD で定義されたタグなど 
を使用してマークアップされた文并本体のことをこう呼びます （DTD を具体的に実現したもの)。 

•文害型宣言 （ DOCTYPE 宣言） 

公的 • 私的に関わらず DTD か进に存在している場合、その文»インスタンスは一体どの DTD に 
従って作成されたものかを文書型宣言によって明示し、 DTD を省略することができます。 

反対に、文冉型宣言が欠けていると、その文#インスタンスは何を基准として作成されたのか不 
明となり、結果的に文件を受け取ってもアプリケーションは解釈ができず、利用することができなく 
なります0 HTML が SGML の1形態である以上、文齊型宣言が欠力せないものであること理解して 
ください。 




& ス 3 タィルシートの概要 


HTML には一部を除いて文書の出力様式を厳密に規定する機能はありません。 
たとえば、「見出しレペル 1 J という要素をどのように画面表示するかは、 Web ブ 
ラウザの裁量に任されています。ですから、ある Web ブラウザでは「見出しレベル 
1 」は大きくて太い文字で表示されますし、別の Web ブラウザでは画面の中央に揃 
えて表示されます。 WWW や HTML が考案された当初はこれでも十分でしたし、現 
在でも HTML 文番の情報を利用するためだけなら本質的には問題はありません。 

しかし、 WWW が一般に普及するにつれ、 HTML 文畨は情報の共有手段から積 
極的な宣伝行為にも利用されるようになりました。そうなると、まず大切なのは文 
迸を出力した際の「見栄え」です0いえ、商業行為を伴わなくても、せっかくの情 
報をよりわかりやすく表現することは大切なことです 0 そのため、一時期 Web ブラ 
ウザメーカーが HTML 文齊の「表現力」を商めるために、競って独自の HTML の拡 
張規格を作成したこともありました。加えてューザの側でも、凝ったレイアウトを 
実現するために、本来の HTML の規則には合致しない使用方法（5¢技） がいろいろ 
と考案されました。 

その結果、 HTML 文書はかなり見栄えのよい表現ができるようになりましたが、 
その一方で「情報の共有」という本来の目的の維持が危うくなってしまいました。ま 
た、 Web ブラウザによっては実際の見え方力诠く異なるため情報が正しく伝わらな 
かったり、ひどい場合にはまともに表示できなくなる問題も起こってきました。 

そこで、禅入されたのが「スタイルシート J です。この名前、どこかで見聞きした 
ことはありませんか？そう、みなさんか•利用しているワープロにもこの機能があ 
りますよね0たとえば「見出し1は新ゴ B 、 18ポイント、斜体、左インデント 
20 mm 」 とか、「本文はリュウミン M - KL 、 10ボイント、左インデント 25 mm 」 とか 
あらかじめ登録しておいて、文铿を作成する際には半自動的に修飾が要素に適用で 
きる機能です。 

HTML で使用されるスタイルシートも基本的な考え方はこれと同じで、 HTML 文 
書内の各要素を個別に、あるいはまとめて修飾するものです。ただ、 ワープロの ス 
タイルシートが文替本体と一体不可分の関係にあるのに対して、 HTML で使用す 
るスタイルシートは HTML とは独立した規格です。そのため、 HTML 文書の中だけ 
でなく、全く別のフアイルに記述して適用することもできる点が異なります。 

また、修飾情報の指定は英単語を主体としたテキストファイルで記述されるため、 
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習得や作成が比較的容易、かつスタイルシート自体の互換性や再利用性がある点 
も異なります。さらにインターネット上で使用されることを考慮して、少しでもデ 
一夕景を少なくするための工夫もなされています。 

現在のところ、このスタイルシートは CSSl (Cascading Style Sheets , level 1) 
とその上位規格である CSS 2 (Cascading Style Sheets , level 2) の 2 つが ^ W 3 C 
から正式に勧告されており 、 HTML 4.0 ( HTML の最新バージョン）と組み合わせ 
て使用することが•できます。 

なお、具体的なスタイルシートの使用方法や効果に関しては、別途専門の解説 
書をご覧ください。 


Web Style Sheets 


すぐ■去し:’ 

i j:: : て ?’— み す _ 

二ご^^^^^^^^^^^^^^^^^^^^^^^^^土^^^^^^^ 4 


スタイルシート機能を使用して 
くても HTML 文書の 持つ情報は、 
過不足なく得ることができる 
(できなくてはならない） 


W 3 C のスタイルシート解説ページ（スタイルシート機能をオフにして表示） 




ージをスタイルシート糖能をオンにして表示 
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文字セツトと符号化方式 


文字せツト 


現在コンピュータ上では、さまざまな文字が使用されています。もちろん、それ 
らは無秩序に寄せ集めて使用されている のでは なく、言語などを単位に使用できる 
文字の種類が決められています。そのような文字の集まりを「文字セット （ ※1 ) 」と 
いいます。ローマ字表や常用漢字表、あるいは活字棚のようなものを想像していた 
だければ結構です。 

たとえば、米国では 「 ASCII 」 という文字セットが標维となっています。 ASCII 文 
字セットは、7ビットのデータで表現されますので、2の7乗=128種類の文字が 
定義されています（※之）。また、欧州ではデータ缺をもう1ビット増やして8ビッ 
卜 (256 稀:類）で表現する「 IS 08559- 1 J という文字セットが使用されています。こ 
れは1つの文字セットで欧米の14言語が表現可能なため、インターネット上でも 
広く使用されています。 

日本では、1969年に 「 JISX 0201 J という文字セットが制定されています。この 
•JIS X 0201には2種類存在します〇1つは7ビットのデータを使用するもので、 
ASCII 文字セットとほぼ同じセットと、日本独自のカタカナを収めたセットの2セ 
ットを切り替えながら使用するものです。そして、もう1つはデータ通をもう1ビ 
ット坳やして8ビットにし、 ASCII 文字セットとカタカナを同じ文字セットに収め 
たものです。どちらも使用できる合計文字数 （256 種類）は同じです。なお、一般 
的に前者を「7ビット系」、後者を「8ビット系」と呼び分けています。 

その後 コン ピュータが進歩してもっと多くの文字数、つまり漢字力锻える可能性 
が出てきました0しかし、日本語の漢字は8ビットの枠には収まらないので、8ビ 
ットのデータを2つ1組で用いて1つの文字を表現する方法が考案されました〇こ 
れなら理論上は256 X 256 = 65, 536種類の文字が表現可能です。もっとも、 
ASCII 文字セットとの互換性を維持するために、実際に定義できる文字数はずっと 
少なくなります。たとえば、現在の日本で私たちが普段使用している標準的な文字 
セット 「 JISX 0208 m 3)」 では、8,836種類が定義可能です。 

なお、文字セットに関する詳細を知りたい場合は、専門の解説書や資料をご覧 
ください。とりあえず、ここでは言語などを単位として使用可能な文字種類を定義 
した「文字セット」というものか节在することを知っていただければ十分です。 
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符号化方式- 

文字は文字セットとして定義されただけでは、コンピュータで利用することはで 
きません。文字は具体的なビット配列との対応が定められて、はじめてコンピュー 
夕で処理できるようになります。この文字とビット配列を対応させる規則を r 符号 
化方式」といいます。 

現在日本で使用されている主な符号化方式には、パソコンでお馴染みの「シフト 
JIS 」、 主に UNIX 上で使用される 「 EUC 」、 そしてインターネットで標準的に使用 
される 「 ISO -2022- JP ( JIS コード)」の3種類があります。また、これらの符号化 
方式では 、 JISX 0201、 JISX 0208 など複数の文字セットを同時に扱うことがで 
きます。 

ところで、インターネット上ではさまざまな言語の HTML 文害か # 公開されていま 
す。そのため、サーバやアブリケーシヨンか HTML 文書の符号化方式を確実に判断 
できるように、 META 要素に符号化方式を記述することが推奨されています （ P .40 
参照）。また、各種符号化方式を明示する場合、 charset パラメータに入れる値 
(名称）は、以下のようなものがあります0大文字と小文字の区別はありません0 


1符号化方式 

charset パラメータ循 

符号化可能な文字セツト 

つ 

ASCII 

us-ascii 

ASCII 

ISO -8859- 1 

iso -8859- 1 

ISO 8859-1 

IS 0-2022 -JP 
(JIS コード） 

iso -2022 -jp 

JIS X 0201 

JIS X 0208 

他 

EUC 

euc-jp 

JIS X 0201 

JIS X 0208 

他 ■ 

シフト JIS 

shift Jis 

JIS X 0201 

JIS X 0208 



いう値を入れるものがあります。これは 「 euc - jpj や 「 shiftjisj が正式名として確 
定していなかった時代に 、 Netscape Navigator 2.0 が独自に使用した名称の名残り 
で、困ったことに Netscape Navigator 2.0 は正式名称の方を認識しません。ですか 


ら、インターネットで HTML 文害を公開する場合は、極力 ISO -2022- JP だけを使用 
するのがいいでしよう。 


交字•照（特殊 CS の取り扱い）- 

「<」「>」「”」「&」の4種類の記号は、 HTML ではマークアップなどに使用され 
ますので（※斗）、そのまま HTML 文書内に記述しても「文字」として認識（表示）さ 
れません（たとえば「<」記号はタグの開始記号として解釈される）〇では、これらの 
記号を HTML 文書内で「文字」として使用するためには、どうすればぃぃのでしよ 







文字セツトと符号化方式 


うか？ 

HTML では、ユーザが使用している符号化方式、あるいはハードウェアやソフト 
ウェアなどの環境によって使用できない文字や HTML で使用する特殊記号を使用 
可能にするために「文字参照」という仕組みを用意しています。この文字参照には、 
文字セットの符号値を使用する「数値文字参照」と、実体名（文字の名前の略称） 
を使用する「文字実体参照」の2つの方法があります0 

もっとも、 Web ブラウザの表示フォントを「日本語フォント」に設定している場 
合、文字参照を使用しても現在の Web ブラウザでは正しく表示されないことが多 
いので、あまり使用する機会はありませんほ5)〇ただ、冒頭の4種類の文字につ 
いては、日本語フォントを使用していても表示可能なので、覚えておいてください。 

数値文字参照では文字コードを、文字実体参照では実体名を 「& J と「;」で囲んで 
参照（指定）します。「;」は条件によっては省略できますが、基本的に常に記述する 
ものと考えてください。また、大文字と小文字は区別されます。 


パ.：：. 

文字名_ 

S 5 値実体参照（十進戠表記 

文字実体参 | 

_ 

二道引用符 

&#34: 

Squot ; 

& 

アンパサンド 

&#38； 

Samp : 

< 

小なり 

&#60; 

& lt : 

> 

大なり 

&#62: 

& gt : 


浓1)文字セット ( Characterset ) 

正式には「文字樂合 J ですが、•般的には「文字セット」と言った方が通じやすいようなので、 
本梅では文字セットと表記しました。 

※之 ） ASCII 

(American national Standard Code for Information Interchage ) 

US-ASCII とも呼ばれます。理論上は128棟類の文字が使用可能ですが、実際には制御記号への 
荆り当ても必要なので、目に見える文字は94棟®です。なお、国際規格としては、通貨記号以外 
ほぼ ASCII そのままの ISO 646があります。 


※ヨ） 

細かく 言えば、 JIS X 0208には JIS X 0208 -1983 と J1S X 0208-1990、 JIS X 0208-1997の3 
穐類あり、文字セットの内容力喏干異なります。 

※ 斗） 

厲性値の区切り記号「”」は、 Web ブラウザによってはそのまま表示されることもあります〇た 
だ、混乱を防ぐためも文字参照を使用した方力化、いでしょう。 

※ぅ） 

たとえば、 Web ブラウザによっては、欧米の Web ページを表示すると1バイトカナの「ハ」が表 
示されることがあると思います。それは r&nbsp;J という「空白文字」の文字実体参照を Web ブ 
ラウザが正しく解釈していないことが原因です。 
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HTML の文法チェック 


HTML 文書が一通りできたら、一•般的には Web ブラウザを使用して表示や動作 
の具合をチェックします。しかし、多くの Web ブラウザは一般ユーザ向けの製品だ 
けに、少 々HTML の文法が間違っていてもそれなりに表示してくれます。それはそ 
れで便利なのでしようが、世の中には正しくマークアッブされていない HTML 文斟 
からは、正しく情報を弓Iき出せない Web ブラウザやアプリケーションもたくさん存 
在しています。 

そこで HTML 文齊を公開する前に、 「HTML 文法チェッカー」の類でチェックす 
ることをおすすめします。文法チェックには、アプリケーションを利用したり、文 
法チェックを行うホームページを利用する方法があります。 


參 Jchecker 

株式会社まつもとが開発した JChecker は、 Mac OS 上で動作するチェッカー。 
HTML 4.0 のチヱックを主目的にしたチヱッカーですが、自分で辞？ F を調整すれば 
ほぼ HTML 3.2 專用として使用することも可能です。 

入手先： http://www.matsuxnoto.co.jp/ (2, 300 円のシェアウェア） 


36 ^フ 7 イルチ*•ノクブラウザ Help 



|P1 2 tSl 395 i ^ii^t jjggiig[Q| 


D 

! 

□ 


■ 

_ _ _ . _ _ — 一一 


1：^IDOCTYPE ffTML PUBLIC ••f/tXf/m HTML 3.2//EH *、 

2 HTML 3.2 Reference SpecificatioiK/title 

3 ： body bjcolor-'trFF6F0 _ 

4 backjround-'recbg. Jpg" 
v iexi-'« 00000 0* 

6 Unk-'ICOOOOO' 

7： vlink- B l800000' aliid-'lFFOOFF' > 

8 <!--baS8foni 8126-3—> 

9 <h2 align-righi><A HKIF- • hup://w.tf3.org/_xi_ alittn-lefi border-0 alt-'tfiC：' 
io ： vidth-72 height-48 

ii ： wc-"hit-p : //vw . v3 .org/pnl»/VW/ 1cohb/VW/v3c 

12 ： REC-hUU32</H2> 

13: 

M ノ hi ali?r»*cenier>HTHL 3.2 Reference Specification/hl> 

13: 

□ 

□ 




HTML 文法チェッカーの JChecker 





























HTML の文法チェック 


• Libra ( 日本語対応 HTML 文書検証サービス） 

矢野啓介氏が作成.公開している検証サービスです。 WWW サーバへ送信した 
HTML 文書の URL を入力して、チェックしてもらいます。 

http : //ais2.main.eng.hokudai.ac.3p/%7Eyano/htv/ 


•Another HTML-lint gateway 

石野患一郎氏が作成 • 公開している検証サービスです。厳密なチェックだけでな 
く、間違いに対して丁寧な解説もしてもらえるサービスです。また、サーバ上の 
HTML 文害だけでなく、ソースを入力欄にコピー&ペーストしてチェックしてもら 
うこともできます0 


http: // ring•aist•go•jp/openlab/kl6/htmllint/htm 
llint.html 

http: / /www.vector.co.jp/htmllint/htmllint.html (ミフー 

サイト） 


•i-Checker 

日本 IBM 社が作成 • 公開している検証サービスです0これは HTML の文法その 
ものではなく、主にアクセシビリティに関して重要な項目（たとえば、 ALT 域性の 
不備など）についてのチェックを行ってもらえます。 

http://www.ibm,co.jp/accessibility/i-checker/ 


なお、同社ではアクセシビリテイに関する情報を「こころ Web 」 というサイトで公 
開しています0実例や関連情報へのリンクも充実していますので、 HTML 文書を公 
開する前に、ぜひ一読をおすすめします。 


http: / /www. ibm.co. 3 p/kokorowet>/ 
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色名と 1 6 進数の対応表 



16 進数 


#F0F8FF 

#FAEBD7 


#OOFFFF 


#7FFFD4 

#FOFFFF 


#F5F5DC 

#FFE4C4 


#000000 


#FFEBCD 



dodgerblue 

firebrick 

floralwhite 



go 


goldenrod 


cadetblue 


chartreuse 


chocolate 


cornflowerblue 



darkblue 


da 


da 


da 


darkgreen 


darkkhaki 


darkmagenta _ 
darkolivegreen 


darkorchid 


darkred 


da 


#DEB887 

#5F9EA0 

#7FFF00 


#D2691 


#6495ED 


#FFF8DC 


#DC143C 


#00FFFF 


#00008B 


#008B8B 


#B8860B 


#A9A9A9 


#006400 


#BDB76B 


—#8B008B 
#556B2F 


_#FF8C00_ 

#9932CC 


#8B0000 



E90FF 


#B 22222 
#FFFAF0 


#228B22 


#FF00FF 


#DCDCDC 


#F8F8FF 


#FFD700 


#DAA520 


#808080 


#008000 


#ADFF2F 


#F0FFF0 


_#FF69B4_ 

#CD5C5C 


#4B0082 



lavender 


lavenderblush 


lawngreen 


lemonchiffon 


lightblue 




darkslategray 


da 


darkviolet 


deeppi 


#2F4F4F 


#00CED1 


#9400D3 


#FF1493 


lightgoldenrodyellow 

lightgreen 


lightgrey 


lightsalmon 


lightseagreen _ 

lightskyblue _ 

lightslategray 


lightsteelbl 


lightyellow 


limegreen 


#F0E68C 


#E6E6FA 

#FFF0F5 


#7CFC00 


#FFFACD 


#ADD8E6 


#F 08080 


#E0FFFF 


#FAFAD2 

#90EE90 


#D3D3D3 


#FFB6C1 


#FFA07A 


#20B2AA 

#87CEFA 

#778899 


#B0C4DE 


#FFFFE0 


#00FF00 


#32CD32 


























































































色名 


16 進数 


色名 


進数 


linen 

#FAF0E6 

magenta 

#FF00FF 



mediumaquamarine 

#66CDAA 

mediumblue 

#0000CD 

mediumorchid 

#BA55D3 

mediumpurple 

#9370DB 

mediumseagreen 

#3CB371 

mediumslateblue 

#7B68EE 

mediumspringgreen 

#00FA9A 

mediumturquoise 

#48D1CC 

mediumvioletred 

#071585 

midnightblue 

#191970 

mintcream 

#F5FFFA 

mistyrose 

#FFE4E1 

moccasin 

#FFE4B5 

navajowhite 

#FFDEAD 

navy 


oldlace 

#FDF5E6 

olive 


olivedrab 

#6B8E23 

orange 

#FFA500 

orangered 

#FF 4500 

orchid 

#DA70D6 

palegoldenrod 

#EEE8AA 

palegreen 

#98FB98 

paleturquoise 

#AFEEEE 

palevioletred 

#DB7093 

papayawhip 

#FFEFD5 

peachpuff 

#FFDAB9 

peru 

#CD853F 


pink 

#FFC0CB 

plum 

#DDA0DD 

powderblue 

#B0E0E6 

purple 


red 

#FF0000 

rosybrown 

#BC8F8F 

royalblue 

#4169E1 

saddlebrown 

#8B4513 

salmon 

#FA8072 

sandybrown 

#F4A460 

seagreen 

#2E8B57 

seashell 

#FFF5EE 

sienna 

#A0522D 

silver 

#cococo 

skyblue 

#87CEEB 

slateblue 

#6A5ACD 

slategray 

#708090 

snow 

#FFFAFA 

springgreen 

#00FF7F 

steelblue 

#4682B4 

tan 

tG 3 l 

#D2B48C 

thistle 

#D8BFD8 

tomato 

#FF6347 

turquoise 

#40E0D0 

violet 

#EE82EE 

wheat 

#F5DEB3 

white 

#FFFhPF 

whitesmoke 

#F5F5F5 

yellow 


yellowgreen 

#9ACD32 


<注意 1 > この表は、英語の色名と 16 進数の相関を知るために使用してください。 

HTML3.2 で定義されている基本 16 色（表の編掛け部分 P.24 参照）以 
外は、 16 進数で指定してください。色名で指定した場合は、 HTML3.2 の 
文軎型宣言は行なえません。 

< 注意 2> 実際に表示（印刷）される色は、利用者側の機器の調整によって大幅に変 
化します。微妙な色使いにはこだわらないことをお奨めします。 
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Index 要素引き索引 


要素引き索引 



COORDS. 231 

HREF. 233 

NOHREF. 234 

SHAPE.231 



A.206 

HREF.208 

NAME.210 

RE し .212 

REV.213 

TARGET.214 

TITLE.213 

ADDRESS.54 

APPLET.236 

ALIGN. 241 

ALT.239 

CODE.238 

CODEBASE.238 

HEIGHT.241 

HSPACE.241 

NAME.240 

VSPACE.241 

WIDTH.240 

AREA.230 

ALT.234 


B.141 

BASE.35 

HREF.36 

TARGET.37 

BASEFONT.135 

SIZE.135 

BGSOUND.299 

LOOP.300 

SRC.300 

BIG.147 

BLOCKQUOTE.91 

BODY.22 

ALINK.25 

BACKGROUND.27 

BGCOLOR.25 

BGPROPERTIES.28 

LEFTMARGIN.28 

LINK.25 

TEXT.25 

TOPMARGIN.28 


316 
















































Index 



FONT . 131 

COLOR.133 

FACE.134 

SIZE.132 

FORM .172 

ACTION.174 

ENCTYPE.176 

METHOD.175 

FRAME .259 


FRAMEBORDER ..… 

…… 267 

LONGDESC . 

.…" 266 

MARGINHEIGHT..." 

268 

MARGINWIDTH. 

•…"268 

NAME. 

……261 

NORESIZE. 

……266 

SCROLLING. 

. 266 

SRC. 

……260 


FRAMESET .252 

COLS.254 

ROWS.253 


•21 

•51 

53 

93 

94 

94 

95 
95 
20 





























































要素引き索引 



I 


L 1 

1 . 

.139 

LI. 

.71 

IMG. 

.215 

TYPE. 

.74 

ALIGN. 

.221 

VALUE. 

.75 

ALT. 

.218 

LINK. 

.46 

BORDER. 

.224 

HREF. 

.47 

CONTROLS. 

.227 

REL. 

.47 

DYNSRC. 

.226 

REV. 

.48 

HEIGHT. 

.223 

TITLE. 

.49 

HSPACE. 

.225 

TYPE. 

SO 

ISMAP. 

.226 


liyf 1 

LOOP. 

.227 


1V1 篇 

LOOPDELAY. 

.227 

MAP. 

228 

SRC. 

.218 

NAME .. 

… 229 

START. 

.227 

MARQUEE • 

… 283 

USEMAP. 

.226 

ALIGN. 

. 286 

VSPACE. 

.226 

BEHAVIOR... 

…287 

WIDTH. 

.222 

BGCOLOR. 

.…"285 

INPUT. 

.179 

DIRECTION. 

287 

ALIGN. 

.195 

HEIGHT. 

. 285 

CHECKED. 

.193 

HSPACE. 

. 285 

MAXLENGTH •••". 

.194 

LOOP. 

……287 

NAME. 

. 188 

SCROLLAMOUNT 

287 

SIZE. 

.193 

SCROLLDELAY …… 

287 

SRC. 

.194 

VSPACE... 

…285 

TYPE. 

.181 

WIDTH. 

285 

VALUE. 

.190 

META . 

. 40 

ISINDEX . 

.33 

CONTENT... 

...45 

PROMPT. 

.33 

HTTP-EQUIV. 

. 41 



NAME. 

. 44 


JlX, 

MULTICOL 

277 

KBD . 

.166 

COLS. 

…278 



GUTTER . 

278 



WIDTH. 

. 279 


318 

































































Index 

N 

MULTIPLE. 

. 199 

NAME. 

.198 

NOBR. 

.273 

SIZE. 

.198 

NOEMBED .. 

… 297 

SMALL... 

.149 

NOFRAMES. 

.270 

SPACER. 

.280 

NOSCRIPT. 

.250 

ALIGN. 

.282 

O 

HEIGHT. 

.282 

SIZE .. 

… 281 

OL. 

.67 

TYPE. 

.281 

COMPACT. 

.70 

WIDTH. 

.282 

START. 

.69 

STRIKE. 

.145 

TYPE. 

.68 

STRONG. 

.158 

OPTION. 

.200 

STYLE. 

.39 

SELECTED . 

. 200 

SUB. 

. 151 

VALUE. 

.201 

SUP 

. 153 




P 


T 

P. 

.56 

TABLE. 

.97 

ALIGN. 

.57 

ALIGN. 

.99 

PARAM. 

.242 

BORDER. 

.103 

NAME. 

.242 

CELLSPACING. 

.104 

VALUE. 

.242 

CELLPADDING. 

.104 

PRE. 

.85 

BORDERCOLOR... 

.105 

WIDTH. 

.87 

BORDERCOLORDARK ..105 


BORDERCOLORLIGHT .105 

WIDTH .. 

… 102 

SAMP . 

.164 

TD. 

.122 

SCRIPT ( 拡張） . 

.246 

ALIGN.. 

.127 

CHARSET. 

.249 

BGCOLOR. 

.130 

DEFER. 

.249 

COLSPAN. 

.126 

LANGUAGE. 

.248 

HEIGHT. 

.129 

SRC. 

.249 

NOWRAP. 

.124 


TYPE.247 ROWSPAN.125 

SCRIPT (へッ ダ情報） .38 VALIGN.128 

SELECT .196 WIDTH.128 


,319 




























































Index 要索引き索引 


TEXTAREA . 203 

COLS. 205 

NAME. 205 

ROWS.205 

WRAP.205 



UL 


63 


COMPACT.66 


TYPE.65 


V 


VAR . 168 


w 


275 






















Index _ 

目的引き索引 


文書全体に関わる設定 J 

コメントを記述する 

29 

自動的に他のリソースを読み込む 

44 

文書のタイトルを設定する 

31 

文字の符号化方式を明示する 

41 

リンク設定の際、基準となる URL を指定する 

35 


文書本文に関する基本設定 


アクセス中のリンク色を指定する 25 

既アクセスのリンク色を指定する 25 

本文のテキスト色を指定する 24 

本文の背景イメージを指定する 27 

本文の背景色を指定する 25 

未アクセスのリンク色を指定する 25 


文書の基本構造 


Web ブラウザの自動テキスト折り返し機能を無効にする 273 
引用文を区別する 91 
改行位置を指定する 60 
改行位置の候補を指定する 275 
空白などで整形したテキストファイルをそのままの形で表示する 85 
作者の連絡先(アドレス)を記述する 54 
水平線を引く 93 


P 1 
















目的引き索引 


段組みを栺定する 277 
段落を作成する 56 
任意のスペースを設定する 280 
複数の要素をまとめて位置揃えする 88 
見出しを指定する 51 



語句とその説明をリスト形式で表示する 77 
番号付きリストの開始番号を指定する 69,75 
番号付きリストの行頭記号を変える 68,74 
番号付きリストを表示する 67 
番号なしのリストの行頭記号を変える 65,74 
番号なしのリストを表示する 63 



表題を指定する 

106 

表のサイズを指定する 

102 

表のセルサイズを指定する 

119,128 

表のセル内での改行を禁止する 

115,124 

表のセル内のデータの位置を指定する 

111,118,127 

表の外枠の太さを指定する 

103 

表のデータを設定する 

122 

表の表示位置を指定する 

99 

表の見出しを設定する 

113 

表の枠組みを指定する 

97 

表の枠の太さを指定する 

104 

複数の行にまたがるセルを作成する 

116,125 

複数の列にまたがるセルを作成する 

117,126 



1 行のテキスト入力欄を設定する 182 

選択メニュー形式のフォームで複数項目の選択を許可する 198 



















Index 


選択メニュー形式のフォームを設定する 

196 

単数項目を選択するボタン（ラジオボタン)を設定する 

183 

データフィールドに名前を設定する 

189 

デフォルトで選択されるボタン項目を指定する 

193 

デフォルトで選択されるメニュー項目を指定する 

200 

入力内容をクリアするボタンを設定する 

186 

入力内容を送信するボタンを設定する 

184 

パスワード入カタイプのフィールドを設定する 

182 

フォームによるデータの送信方法を指定する 

176 

複数行のテキスト入力欄を設定する 

203 

複数項目を選択するボタン（チェックボックス）を設定する 

183 


( フオントとフオントスタイル ] 

上付添字を指定する 

153 

基準となるフォントサイズを指定する 

135 

下付添字を指定する 

151 

スクロールテキストを表示する 

283 

テキストを点滅表示する 

288 

等 幅 フォントで表示する 

137 

フォント色を指定する 

133 

フォントにアンダーラインを付加する 

143 

フォントに取消線を付加する 

145 

フォントのサイズを指定する 

132 

フォントの種類を指定する 

134 

フォントをイタリック表示する 

139 

フォントを大きめに表示する 

147 

フォントを小さめに表示する 

149 


フォントをボールド表示する 141 


の意味付け 


引用 • 参照元文害のタイトルなどを明示する 

語句を強調する 


170 

155 


語句を強く強調する 


158 
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Index 目的引き索引 


サンプル出力であることを明示する 164 
定義された語句であることを明示する 160 
プログラムコードであることを明示する 162 
プログラムの変数であることを明示する 168 
ユーザ（キーボード）が入力すべき語句であることを明示する 166 



HTML 文書内にリンク先を設定する 210 

テキストや画像にリンクを設定する 208 

複数の HTML 文軎のリンク関係を設定する 212 

リンク機能を使用してメールを送信する 209 


画像関連 1 

画像に対するテキストの回り込みを解除する 

61 

画像に対するテキストの回り込みを指定する 

221 

画像の代わりに表示するテキストを設定する 

218 

画像の表示サイズを指定する 

222 

画像を表示する際の余白を指定する 

225 

テキスト行内の画像の表示位置を設定する 

221 

表示する画像を指定する 

215 


1クライアントサイド•イメージマップ 


クライアントサイド • イメージマップ用の画像を指定する 

229 

クライアントサイド • イメージマップを設定する 

230 



Java Applet を使用する 236 


スク U プト 


使用するスクリプト言語を設定する 246 


3H 


















Index 


スクリプト言語未対応 Web ブラウザへの配慮 250 


フレーム 


新たにウィンドウを開いてリンク先の HTML 文書を表示する 264 

フレーム境界線の表示を設定する 267 

フレーム 内に表示する データを 設定する 260 

フレーム内のスクロールバーを制御する 266 

フレームの基本構造を設定する 253 

フレーム未対応ブラウザのユーザーへ配盧する 270 

フレームを解除してリンク先の HTML 文書を表示する 264 

ユーザによるフレームサイズの変更を禁止する 266 

リンク先のリソースを表示するターゲットフレーム名を指定する 261 

リンク先を表示する基準フレーム名を指定する 263 


プラグイン 


プラグイン未対応 Web ブラウザへの配慮する 297 

プラグインを使用してデータを表示する 290 
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